15

I have a simple navigation setup that requires tabs and sub-tabs. I have the main tabs ready:

Main tabs

But I don't know how to make the sub-tabs fit in and still be user-friendly. What's a good way to handle this?

Improve this question
14
  • Do you have another layer of navigation (i.e. main site nav) above it? Are the sub-tabs absolutely necessary?
    – dnbrv
    Jan 18, 2012 at 15:49
  • 1
    I refuse to believe sub-tabs are ever necessary. They're pretty evil ;P. Generally speaking though, the best approaches I've seen are where the subtabs don't really look like tabs, but more like links. Think of it like your Bookmarks Bar in Chrome or Firefox. Yahoo & ESPN's Fantasy Sports are good examples of this.
    – Brad Orego
    Jan 18, 2012 at 17:25
  • 2
    Smashing Magazine (smashingmagazine.com) does an elegant job of handling multiple levels of navigation. If you open them in a large browser window and start narrowing the window, you will see (through responsive design) a number of design solutions.
    – Taj Moore
    Jan 18, 2012 at 18:42
  • 1
    @minitech I can't really answer that question without knowing more about the site; what's the purpose of these tabs? It might be worthwhile to take some time to think about what your users are trying to accomplish, and use that to better inform your organizational structure. At the very least, you could list out the top, say, 6-8 most common, then create a drop-down menu at the end for "More" or "Other" options.
    – Brad Orego
    Jan 18, 2012 at 18:58
  • 1
    Nested tabs, unfortunately, are usually a symptom of bigger overall IA issues.
    – DA01
    Jan 18, 2012 at 21:22

3 Answers 3

Reset to default
16

Simple:

First off, you may find this question about best practices for tabs interesting where faceted navigation is proposed as an alternative for nested tabs. As the comments point out, it can be a more deeply rooted problem of Information Architecture and addressing it could prevent you from creating nested tabs altogether.

Also, this question about multiple tabs explores the tab metaphor and proposes some other alternatives.

That said, sites with a high amount of information are normally structured in a strict hierarchy pattern, which in UI translates in using multi-level menus, navigation tabs, or breadcrumbs.

Examples of sites with great amount of information that use multi-level tabs are news sites.

enter image description here

enter image description here

Notice how these navigation menus don't really use the tab metaphor although they work as such.

Obvious:

We were recently working with multi-level tabs and the designer went through some design ideas to find which one worked better.

enter image description here enter image description here enter image description here enter image description here

We found that users didn't notice the ones with less contrast, and had difficulties finding sub-sections. Also you can see the use of "pills" as an alternative to tabs to avoid a metaphor of tabs within tabs (nested tabs).

We ended up using the last alternative, for the following reasons:

  • High contrast: easy to spot on an information-heavy site.
  • Affordance: explicitly using UI tabs gives the right message: they are intended for navigation. The other examples don't have the affordance of a tab and could be confused with regular links or advertisment.
  • Integration: by using the father's selected color as the background for the nested tabs, it clearly conveys sub-tabs are navigation within the selected menu option.

Elegant:

Elegance is rather subjective. My opinion is that elegance goes hand-in-hand with simplicity and attention to detail. As a bonus, a Smashing Magazine recopilation of elegant sites (I love this blog).

Improve this answer
2
  • Hm... I do like that last option.
    – Ry-
    Jan 20, 2012 at 20:39
  • 1
    Great comprehensive response.
    – Ben Brocka
    Jan 20, 2012 at 22:52
12

I like the this multi-level tabbed interface although I'm not sure it meets your needs: tabbed interface

Originally found here: Designmodo Futurico UI Pro

This UI pattern is also used on Github: Github's fancy pants tab navigation

Improve this answer
3
  • 1
    The separation between vertical and horizontal tabs makes the different quite clear, I like it.
    – Ben Brocka
    Jan 20, 2012 at 22:57
  • Github has changed its UI to a multi-tab pattern.
    – Sarah Akhavan
    Jan 30, 2017 at 11:09
  • Also using both horizontal and vertical tabs, makes confusion, doesn't it? Interesting pattern though...
    – Sarah Akhavan
    Jan 30, 2017 at 11:10
5

http://uxmovement.com/navigation/why-hover-menus-do-users-more-harm-than-good/ makes some good points. When it comes to horizontal sub menus, I definitely agree, they are much less usable. An application I'm currently working on has one in it, and I curse every time I use it.

At least with a vertical dropdown, the hover tunnel is much bigger and doesn't require the same level of accuracy in your mouse movements/clicks.

Improve this answer

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.