Tabbed interfaces where the number of tabs is up to the user employ different solutions for the point where tabs of the default size no longer fit on the screen.

Google Chrome begins to reduce the width of the tabs, and does this up to a huge and unusable number of tabs and doesn't provide any special means of navigation between tabs. enter image description here

Firefox both reduces the width of the tabs, provides a navigation dropdown (from the very beginning - as soon as there's two tabs), and when you exceed a certain number also provides scrolling arrows at the right and left ends of the tab bar.

enter image description here

IE9 reduces the width of the tabs and at a certain point also provides scrolling arrows.

enter image description here

Axure RP doesn't reduce the width of the tabs (not by much in any case), and just provides the dropdown and the arrows. enter image description here

Which approach is best and why? It's important to note that in my case, the labels may be very long (4-5 words) and not necessarily very descriptive when truncated.

  • 2
    Possible duplicate Commented Jun 27, 2012 at 11:41
  • @AndroidHustle Interesting that I didn't find that question, although I searched for something like that :). In any case, I don't think it's a duplicate. That question discusses static tabs, where one is added each year. It's mostly a navigation model issue. Mine is about dynamic tabs opened by the user, and the detailed interaction design. Commented Jun 27, 2012 at 11:48
  • Well, yes. However, the user interaction issues with finding a suitable navigational strategy to switch between a large set of tabs is still translatable between the two cases. Nonetheless I can see your point in this being in a dynamic context and that you want answers revolving that prerequisite. Commented Jun 27, 2012 at 12:01
  • 4
    You forgot the worst option of all: creating multiple rows of tabs. Just for completeness sake :-)
    – André
    Commented Jun 27, 2012 at 12:01
  • Actually, on second though - the possible duplicate is wrong. The original question was specific to tabs based on dates and should be edited to make that clear. Commented Jun 27, 2012 at 14:49

4 Answers 4


I like how Tab Mix Plus handles this - using multiple tab rows...

Tabs in Firefox using Tab Mix Plus

This is one of the things I like about Firefox - great extensions.

You can also attempt to group tabs according to some criteria (e.g. site) in order to reduce the request screen space.

If you do group the tabs, preview of tabs and the option to drag over a specific tab in a group by activating the previewed tag on drag over, have to be enabled otherwise the grouping will block possible user actions.

An example for this is the task bar grouping in Win 7 vs the task bar grouping in XP and Vista which limited user actions on grouped tabs.

  • 4
    Multiple tab rows are horrific UX.
    – dnbrv
    Commented Jun 27, 2012 at 16:12
  • That is a matter of opinion. I have found that as long as that is is clear which tab is active the multiple rows is a good UX for me. Commented Jun 27, 2012 at 16:20
  • I have actually user tested multiple rows of user tabs against other design ideas ... They did not fair well! Commented Jun 27, 2012 at 18:21
  • 1
    The traditional reason why multiple tab rows are bad is that the tab "head" needs to be visually connected to the tab "body", that's the whole concept of tabs. And with multiple rows you can choose one of two evils - either disconnect them and break the model, or rearrange the rows to always keep the active tab at the bottom, which is extremely disorienting. But +1 for a novel direction that I hadn't considered. Commented Jun 27, 2012 at 20:19
  • 1
    Multiple tabs aren't great but I'd be interested to know how they fare against scrolling tabs.
    – benb
    Commented Jun 29, 2012 at 8:02

Off the wall I know ... but why would this be a bad solution?:


download bmml source – Wireframes created with Balsamiq Mockups

We used something similar at Oracle when our tabbed dialogs got too crazy. At least this way you can cope with longer names etc.


Some would argue that:

For browser-like apps, significant horizontal chrome is generally a bad idea, because there's a tendency to value horizontal space more than vertical (for various reasons: scrolling habits, horizontality of western text, monitor sizes etc). In that context, sidebars simply take up unnecessary horizontal space.

However we are talking about the context of a situation where the user is trying to work with many many windows (unusual in itself). In this context then the sorting of the windows does become part of the primary task and therefore I would argue probably does warrant more salience.

The suggestion is not that the vertical nav. is always there but only once the number of windows become unmanageable. In which case you should dedicate the appropriate screen space to this task and vertical presentation fits in much better with an endless list of windows.

Thinking about it logically who is really going to be dealing with these huge number of windows? Probably an expert user who probably also has a very large screen or possibly even two.

Perhaps you could even add some sorting or labelling tool at the top of the window (see second image).

Perhaps the context of use needs to be thought about a little more deeply rather than sticking with your classic solution. Unusual problems sometimes call for a rethink.

  • Thanks Lisa. I'm talking about a browser-like app, not a predefined dialog. As a side note, this way longer names are much more harmful than they are in horizontal tabs, because each pixel of their length eats up another vertical strip reducing your content area. Even in your own sketch you had to cut the labels short :). Commented Jun 27, 2012 at 14:00
  • 1
    I realise that.... but I don't see why you couldn't do it in a window. And my thought on the long names was that they could go over two lines so that the window simply took two lines of the nav... I realise it is not conventional at the window level ... i just don't see why not (: Commented Jun 27, 2012 at 14:57
  • Edited wireframes to show tis... Commented Jun 27, 2012 at 14:59
  • 2
    For browser-like apps, significant horizontal chrome is generally a bad idea, because there's a tendency to value horizontal space more than vertical (for various reasons: scrolling habits, horizontality of western text, monitor sizes etc). In that context, sidebars simply take up unnecessary horizontal space.
    – kastark
    Commented Jun 27, 2012 at 15:05
  • 1
    I actually really like this option in theory, but can't seem to adapt to it in practice. It's how OmniWeb manages tabs (although it used thumbnails as well). It also allows tabs to theoretically be hierarchical as in this Firefox add-on. The best part; using a scrollbar for overflow is as familiar as it gets!
    – Kit Grose
    Commented Jun 29, 2012 at 7:12

I really don't understand why tabs are generally considered a unique problem from the Windows taskbar, which has improved over time quite dramatically from when it used to behave quite similarly to Firefox and other browsers with a little scroll arrow to view overflow items to what we have now in Windows 7.

In general IE seems to be innovating the most in this realm recently. In IE8+, they've got dynamically colour-coded tabs which group tabs that were opened from one another:

IE8's colour-coded tabs

It would seem to me that it would make sense to treat these dynamic tab groups (or something like them, like tabs that all share the same host) in the way that different applications are treated in the Windows taskbar, especially when the tabs overflow. In Windows 7, multiple windows from the same application group together. Clicking on a single group then pops up a list of the windows that it represents:

Tab overflow behaviour in the Windows 7 taskbar

Image taken from the Engineering Windows 7 blog

Sadly even in IE8, even despite its tab grouping, the tabs overflow exactly as you describe above (as opposed to grouping/collapsing tab groups together):

Demonstrating IE8's tab overflow behaviour

Image taken from Chaks' Corner

In general the factors that come to mind as needing to be considered when dealing with tab overflow are:

  1. Legibility
  2. Spatial awareness
  3. Aesthetics
  4. Familiarity

I think Chrome's solution suffers on point 1 but succeeds on point 2. I believe Firefox's solution is the best of a bad bunch based on these requirements. For reference (since you didn't include it), here's how Safari deals with this problem (the tabs listed in the darkened section of the drop-down are the ones that are entirely overflown):

How Safari copes with tab overflow

Perhaps the most novel solution to this problem is that of IE9. While I notice you mentioned how IE9 handles this problem, it's worth pointing out that IE9 was designed to generally accommodate 5 or so tabs (that's a really interesting article for you to read if you're interested in this topic anyway).

Despite the backlash that it invoked in power users (who are used to using huge numbers of tabs), what this design does is encourage users to spread their tabs over multiple windows sooner (effectively removing the need to manage an extremely large number of tabs in a single window).

Edit: There are a bunch of nifty Firefox add-ons that present creative solutions to dealing with very large numbers of tabs, including providing the ability to toggle specific tabs to show only a favicon and thus take up less space, or to "fisheye" tabs like the OS X Dock, such that the tab beneath the mouse/with keyboard focus is shown at full width but it collapses proportionately when not.

In the OS X Dock, the entire Dock itself scales down proportionally to accommodate more items until individual items are minuscule. As described, it can then (optionally) magnify the items closer to the mouse:

The OS X Dock, showing the effect of magnification

Image taken from Control Your Mac


The Chrome approach is wrong, because you clearly cannot then navigate the tabs. I also don't like the IE approach because it can reduce the tabs to something you cannot then distinguish between.

Personally, I prefer the approach of leaving the tabs largely the same (or, at the most, reducing the white space a little), and then allows scrolling and dropdown selection - the Firefox and Axure style.

The only place I have ever had to work with many tabs is on Excel, with a large number of sheets open, and they use this style there, which i find easy to navigate through, because I can quickly see the sheet I need. In that case (and in this, it sounds like), seeing the name of the tab is important, whereas seeing how many tabs you have open (the Chrome/IE style) is less so.

  • In defence of Chrome, in my experience the favicons enable easy tab navigation even when there are a lot of tabs open. Chrome caters well up to quite a high number of tabs but admittedly you can expose a minor weakness by opening 100s of tabs, but is that a realistic use case? Another good feature is that it makes it really easy to move tabs into a new window - better than any other browser. This makes grouping really easy.
    – Rob
    Commented Jun 27, 2012 at 15:18
  • I do not have a problem as such with Chrome, just that as an example for other applications, where there may be hundreds of tabs, it is not the way to go. IMO. Commented Jun 27, 2012 at 15:47
  • 1
    Fair point. I suppose I'm just not convinced that tabs are useful for accessing 100s of different pages. Vitaly, what sort of volume are we looking at realistically? 10s? 100s? 1,000s?
    – Rob
    Commented Jun 28, 2012 at 8:05
  • 1
    @Rob: I agree; Chrome allows the user to open multiple windows each with many tabs. If Microsoft's metrics can be applied to users of Chrome too, over 90% of users have never had more than 8 tabs open.
    – Kit Grose
    Commented Jun 28, 2012 at 15:24
  • @KitGrose I am the 1%!!
    – John
    Commented May 26, 2015 at 20:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.