We're working on a UI at work and people want to have the number of tabs in a certain area be flexible width so that in certain situations depending on the title length and the number of tabs, the tab row might end up filling 2 or even 3 lines.

I'm wondering if it's ever ok to have multiple rows of tabs; to me it seems like it breaks the tab metaphor and then you have to worry about tabs changing locations.

At the same time, though, I'm not sure of a good alternative other than a list or accordion.

Funny, I always prefer to have multiple rows rather than scrolling or cut-off text.
–
MehrdadDec 29 '11 at 23:25

1

1. 'The tab metaphor' is based on the real life tab system. In actual indexing systems, it is not rare to have multiple rows of tabs (Think card-based library index). Only may look odd and unfamiliar in the UI context.
–
KrisDec 30 '11 at 8:59

1

2. Who are the 'people'? The users? If the application is designed exclusively for this group of users, then whatever is convenient for them should prevail over global UI recommendations.
–
KrisDec 30 '11 at 9:00

The tab metaphor is broken not by having multiple rows, but in how they have to behave in order to open (moving rows around or having top row tabs selected. I suppose if you consider the tab area your hand paging through a file and the content area your eyes reading what's in the file you could justify that they don't match up visually and can still be ok.
–
DamonDec 30 '11 at 15:14

Multiple rows of tabs are confusing and intimidating, particularly to
new users who find it difficult to locate the desired tab. In
addition, screen real estate is compromised, and the repositioning of
tabs to the front row causes tremendous confusion and complexity.

That said, we have seen it in MS Office... so it shouldn't be that bad, right. Right?

UPDATE: other approaches are: vertical tabs, grouping tabs by categories, or a previous screen with icons.

+1 "the repositioning of tabs to the front row causes tremendous confusion and complexity."
–
peteorpeterDec 29 '11 at 22:52

I think the multitabs on windows is like hell. Who has thought of this? Turture that guy! If you click an item, the whole layout change and all clarity is loss. I like the approaches the mac-screenshots show. No Im not an absolute mac-freak :p
–
MichaelDec 30 '11 at 23:30

Hi, would you mind fixing the second articles link? It seems really interesting and I wanted to give it a look, but seems that the link is not really there.
–
AlphaJan 3 '12 at 18:26

Late to the conversation here, but this is the correct method of doing it. @FrankL I would change that arrow to say "More >". Indicating there is more navigation to be seen. The only problem then becomes how do you solve for the extra navigation tab. Where does it go when the tab becomes active? The only way around the latter issue would be to make the "More >" tab the active tab giving an indication of where you are in the navigation without specifically saying what it is you are in. That is where a page header comes in handy.
–
rohicksAug 22 '13 at 19:06

Did you achieve this UI with css alone or did you have to use javascript? I am asking because I can only think of a JS solution, but that would always adjust the tabs only after load and therefore have other unwanted "site effects" like flickering of unprocessed tabs.
–
MarcelJun 9 '14 at 17:43

@Marcel, I used JavaScript to dynamically construct the panel with the hidden tabs. If the parent element (container) uses overflow:hidden, the page should load correctly before the javascript kicks in. The only thing the javascript does is look for hidden elements and be ready to display them when the arrow is clicked.
–
EmilJun 12 '14 at 21:19

You could consider the option of having multiple rows by adding one additional row that represents the current tab. For example, if the top row has a tab "foo" and you select it, the tab becomes disabled and the bottom row is changed to have the single tab "foo". The original tab does not move, however.

This avoids the problem of having to rearrange the tabs while somewhat preserving the metaphor. Think of it like removing the contents of a physical file folder but leaving the folder where it is.

I've never seen this done, but I think it might be a good compromise if you have sufficient vertical space for one more tab row.

Yes. There are edge cases where such a presentation is acceptable. MS Windows properties dialogues have used it since at least Windows 95. Multi-protocol instant messaging client Digsby goes for it when the width of the chat window doesn't allow for all conversations to fit in 1 line (it then goes into vertical scrolling of tab rows).

That being said, it's not recommended to have more than 1 row of tabs because interface becomes cluttered. Try to re-organize your information first. If no other options are available, follow Microsoft's example of multiple rows by arranging tabs in a logical way and keeping in mind their size. Also, note how each tab title has approximately the same generous padding on the sides:

Such a multiline tabbed interface is very confusing since tabs change place when selected.
–
agibDec 30 '11 at 11:52

4

Just because Microsoft did it is not a good reason to do it.
–
Bryan OakleyJan 5 '12 at 13:43

2

Just because you don't like Microsoft, doesn't mean you should downvote its patterns when they're considered standard in its realm. Besides, I did say that it's better to avoid it when possible.
–
dnbrvJan 5 '12 at 17:52

3

@dnbrv: I didn't downvote their pattern, I downvoted your answer. Partly because of the Microsoft thing, but also because you wrote "... because interface becomes cluttered". "Cluttering" is not the problem. Tabs moving around when you select them are the problem, and logically organizing multiple rows won't solve that. You could have given an example from an Apple product and I still would have disagreed with your answer. I don't believe something is acceptable just because it is "standard in its realm". That doesn't make it right, it only means it is a pervasive practice.
–
Bryan OakleyJan 5 '12 at 20:20

Horizontal scrolling of tabs, especially when they have meaning, is even worse because they user doesn't know what the hidden tabs are and how many are hidden.
–
dnbrvDec 29 '11 at 22:29

USers also often don't know how to or that you can horizontally scroll instinctively. Horizontal scrolling is very rare, though Excel does it quite often due to the dimensions of the data.
–
Ben Brocka♦Dec 30 '11 at 14:18