In a previous project, I had to create a tabs interface that combined a responsive design with the ability to add/remove tabs dynamically.

Typically, a tabbed layout has a set number of tabs, and a fixed width per tab. But if we peek just above our web world, we see a familiar tab interface that can have “lots” of tabs: our browser tabs.

Chrome, Safari, Firefox, IE, all rely on tabs to navigate across multiple web pages at once. They share a set of similar patterns including:

Clicking a “+” button to the right of existing tabs to add a new tab
Clicking an “x” button inside the tab to remove it
Tabs shrink or grow in length as the browser is resized
You can add/remove as many tabs as you want

There is however one pattern that differs. What happens when you open many tabs, and they overflow outside your browser window width? Let’s take a look:

Safari (7): You’re presented with a double-right arrow dropdown toggle (or "more" link) to view tabs that overflow. By clicking the toggle you're presented with a dropdown of all the tabs that overflow.

Safari (8): Tabs overlap in a fan/accordion pattern. The tab bar becomes scrollable horizontally. You can scroll by swiping across your trackpad. However, it's hard to pick out the overlapped tabs.

Chrome (38): Tabs shrink until there is no more text available. Although this keeps all your open tabs available with one-click, it's hard to determine which tab is what since the labels are gone.

Firefox (32): Same as Safari 8, Firefox creates a horizontal scrolling tabs bar. But there are two improvements: (1) you also have left/right arrows to scroll, and (2) there's a dropdown toggle to view all overflown tabs in a dropdown.

IE (11): You simply have left/right arrows to scroll.

The pattern I found most useful is the tabs dropdown in Safari 7 and Firefox. The dropdown allows me to quickly view at all my overflown tabs, and select one. And so, I built my first jQuery plugin using this pattern:

https://github.com/gabrieltomescu/bootstrap-responsive-tabs

I incorporated three criteria to make the tabbed navigation useful:

Tabs shrink or grow based a specified min and max width
If tabs overflow, a dropdown appears to the right of the tabs
For mobile devices, the tabs dropdown becomes a list overlay

Hopefully you can use this pattern in a future project, or simple spread the word.