Tabbed Navigation, and What Makes it Useful

Navigating the web is a bit unorthodox when you think about it. You click words to teleport around an endless expanse. You'd think there would be someway to create an interface that is reminiscent of the real world—something like tabbed navigation.


What makes tabbed navigation so useful?

Imagine you’ve just walked into a video rental store. It’s not a big place, and by glancing around you see clear labels for your favorite genres such as action, thriller, and romance (though you won’t admit it to your friends). You make your way to the "Action" section knowing without much thought that’s where the action movies are. After deciding there aren’t any movies that interest you, it’s just as easy to look up and see where else you can snoop around relative to where you are now.

…This all goes without saying.

Compare this scenario to navigating a website—You have no physical sense of how big the website is when you arrive (You can’t stand on your toes and get a good look around the entire place), there’s a good chance you didn’t show up at the front door, but instead mystically appeared somewhere deep in the websites content, and you may not even know where that place is. To get from one location to the next, you click a word or button that magically teleports you to another page with no real sense of how much you may have skipped over along the way.

Navigating the web is a very unusual act when you think in these regards: there isn’t quite anything like it we can relate to in real life. In the real world, you walk or drive somewhere with a physical presence you can observe. On the internet, you teleport across expanses of unknown size.

Tabs Bring the Real World to the Web

Tabbed navigation brings a real world element to the web, and when done right works very well in an interface. They help a user answer many essential questions without thinking: Where am I? Where else can I go? How much other stuff is there?


The idea of tabs is something we’re all familiar with.

The idea of “Tabs” comes from the use of tabs in folders or filing cabinets, a real world object most people have some experience with—and a concept that requires no instruction. Like a Website, we don’t flip through a filing cabinet page by page looking for the right piece of information; we teleport in a vague sense by flipping to a tab. If we’re looking at a page in a file, we can easily check to see what file it is a part of. Likewise, we can easily see where we are in the scheme of things by looking at the other files.

Done Right, Tabs Are a Great Convention

There are a lot of ways to screw up tabbed navigations. Luckily, there have been enough successful uses of tabs online to help us understand what works.

1. Tabs Explain Where You Are, and Where Else You Can Go

When planning navigation, it’s easy to focus on the “Where can you go” part of the equation and totally forget about explaining where the user currently is. It’s very important to include both the current location as well as the possible destinations. It’s much more difficult to navigate with no relative location.

Well designed tabs clearly indicate current location with active states, or visual appearances that set them apart from inactive tabs. Active tabs can be highlighted by color (or lack thereof), size, and font-weight among other things.

Example: Veer.com

Veer has tabs that are highlighted when one is selected. Other tabs remain greyed out with white text while an active tab is white with dark text. It’s easy to see where you are, and where else you can go.

2. Tabs Connect with the Content Visually

In many cases, tabs visually connect with the content of a web page. This reinforces the idea of a connection between the page and the active tab, just as one would expect with a filing cabinet.

Example: Last.fm

Last.fm uses tabs to navigate between different profile features for different users. Many of the individual features have their own set of horizontal tabs which also connect with the content.

Example: InvoiceMachine.com

Invoice Machine has a plain and simple navigation structure. The active tab is clearly highlighted as it remains white with the content area while the rest of the tabs are black.

Example: WordPress.org

The Tabs on WordPress.org connect with page headings which are separated from the actual content area, which proves useful since the secondary navigation is different from tab to tab. The tab labels match the page headings to confirm current location.

3. Tabs Can Connect with Secondary Navigation

Using tabs for primary navigation can prove useful for connecting users with the most important parts of a website without losing them in the clutter of secondary and tertiary navigation. If there are 5 primary navigation links, each with 5 secondary level links, there are simply too many choices stopping a user from making a quick decision. There are many ways to reduce the number of choices, but with tabs it becomes easy to associate a primary and secondary levels, and keep the other benefits of a tabbed navigation.

Example: Digital-Photography-School.com

Digital-Photography-School.com uses tabs as a means to travel between three primary categories on the site. When a tab is active, it connects with it’s associated secondary navigation.

Example: Tutorial9.net

Tutorial9.net follows the same structure as the above example, and also highlights active secondary level navigation to help prevent users from getting lost in large numbers of categories.

4. Tabs Within Content

Tabs do not need to be limited to primary and secondary levels of navigation. If they provide a user with the ability to flip between areas of the same content, they can prove quite useful. Combined with technology that switches content without reloading a page can instill a tangible feel to the end user navigating the page.

Example: MailChimp.com

MailChimp allows viewers to view different aspects of their web app without ever leaving the visually appealing front page. Tabs group related features that speak to users trying to accomplish different tasks.

Example: ProBlogger.net

ProBlogger uses tabs to navigate posts based on specific constraints. It’s all the same kind of content, just organized in a slightly different way.

External Resources

These are great resources for further reading on tabbed navigation structures:

About the Author

David Leggett

David Leggett is a designer, developer, and builder of things. He currently resides as Director of Marketing and Design at Python Safety.

Related Articles

28 Comments

  • David Reply

    Nice well-rounded topic regarding the usage to tabs on the web. Just another point, make sure that you ‘active tab’ is designed so it appears to look like the area you are in. Bring it forward with drop shadows and highlights or something of that sort.

  • Matt Reply

    Great post, and Smashing just did a similar post today as well. I guess today is the “day of the tab”. David also made a great point. This is far to often overlooked, but having a selected state in your navigation is very important. Why go through the trouble of creating those awesome tabs, and hover images, etc,. if you are only going to see them for a split second?

  • Andrew Maier Reply

    Wow David. This is a really informative article. It’s pretty easy to peruse UI discussions and miss some of the things you’ve pointed out here. I think helping people get an understanding of where they are in a site’s structure is one of the most often overlooked elements of interface design.

    Thanks for the article!

  • David Hamill Reply

    Nice article. I’ve tested a few sites with internal tabs like MailChimp and they are very often overlooked by users.

  • Aaron Irizarry Reply

    Great article David. I really like the association to the video store, we cant expect that because our users may (or may not) be familiar with the interwebs that they will instantly know where to go to find what they are looking for, in fact they may not even know what they are looking for.

    I think that a well crafted tabbed navigation can be very helpful, espcially when the “selected” state is done properly.

    Another great read.

    ~ Aaron I

  • David Leggett Reply

    Hey, thank you for the kind words everyone. Please keep sharing your ideas to this topic if anything comes to mind.

    @Matt: I actually cringed a little when I saw Smashing post their tabbed article yesterday, but I’m sure there’s enough interest in this sort of material so that neither of us will detract from the other.

    @Andrew Maier: I know this absolutely was a mistake I continually made in many of my own interface designs. It’s not just a problem that comes up with tabs of course—a user should always be able to tell where they are on a website, that’s part of what navigation is by definition. Thanks Andrew!

  • Rank Higher, Make Money! Reply

    You know, I’m just about at the point where if it’s tabbed content within a page itself, I really expect the content within to switch out without a page reload. With navigation tabs, I understand you’re moving on to another page in the site, but there is rarely a good excuse for those content tabs within the page to reload the page I’m already on.

  • Matthias Klein Reply

    Nice article. But I think, tabbed browsing is already outdated.

    Maybe the next step is semantic-tabbed browsing. It should combine dynamic elements on websites with a semantic component.

    Example: You have a site like Wikipedia (…what else. ;-) ). Imagine, reading an entry about Paris. While you read, the site is collecting suggestions for similar topics and gathers them into the tabs of your browser. That would be nice.

    I hope someone with good programing skills and the same vision is reading this. :-)

  • Sava Reply

    Really useful article.
    @David – you are right. There’s no use for tabs unless you somehow connect the active tab with your content.

  • Dr. Pete Reply

    “You have no physical sense of how big the website is when you arrive”

    That’s a great point – one of the jobs of navigation, especially on a complex site, is to quickly give you that sense of space/scope. Especially as people more frequently land deep in sites (not on the home-page), conveying this quickly and efficiently is becoming more critical.

  • iSatisfy.com – Miami Reply

    Tabbed Navigation = Intuitive Simplicity. Keeping things simple in web design keeps your site visitors exploring. For me, it’s a no brainer.

  • Virtual Hires Reply

    Tabbed navigation seems like it should be a no-brainer. Though as I try to recall poorly tabbed sites, I can’t seem to think of any. (I’m sure I could find them if I tried… I’m just sayin’.) I appreciate the section on tabs within content, and especially liked the comment on semantic tabs. Thx for the article and for providing such great examples.

  • blokhut Reply

    wow. This post is heaven send. Thanks. I use this for my graduation document.

  • John Hyde Reply

    The tab metaphor does not extend to the second-level of navigation hierarchy: physical tabs in a filing cabinet do not have sub-categories.

    I have seen people get lost and confused when the tabbed nav degenerates like this – especially when the styling fails to reinforce the navigation hierarchy.

    The digital photo school is an example of getting lost: nobody can see where we are in the second level of navigation. A lot of people will fail to even notice that there IS a 2nd level – the links have no obvious clickability.

    The tutorial9 site suffers from similar problems. Only half solved by highlighting the current 2nd level (“Drawing & Design) which helps the site visitor to figure out that the other 2nd level categories could be links.

    Jakob Nielsen describes users “minesweeping” around a page with their mice to find links.

    Some other oddities of tabbed nav are:

    http://www.trademe.co.nz/. On the “home” tab click the link to “flatmates wanted” and see where you are now…

    http://www.comet.co.uk/ In IE and FireFox for Windows the tabs turn into drop-downs as you mouse over – it works well in testing and allows most users to quickly get where they want to go. In some other browsers the drop-downs hide behind the main page and it all goes wrong….

  • Rainer Reply

    Hi! Thanks for the nice article.

    Just one more question about tabs: What if I have to or want to show more sections on my tab navigation than the page’s width allows for? Does anyone know a good pattern for this?

    I know some solutions for this, but am not sure which is really good:
    – showing several rows of tabs (like the old amazon)… which looks really ugly
    – showing arrows to move the tabs (like for the spreadsheet-tabs in Excel or for the browser tabs in Firefox)
    – showing only as many tabs as fit in the row and offer further tabs in something like a dropdown menu

    What do you think about this? Any other ideas, recommendations or tips for good examples?

  • David Hamill Reply

    @Rainer: Of your 3 options the ugly one is the most intuitive. But it sounds like you need a left hand menu instead.

  • tim Reply

    Great article, tabs are really useful especially on bigger site.

  • iola Reply

    that was most def a very nice article to read! thanks!

  • Amanda Schulze Reply

    @David Hamill: Hey Dave- I was thinking on using these internal tabs in a site I am currently designing – do you have any insight as to why they may have not worked in the context of the sites you have tested.

  • Dallas Web Design Reply

    Good stuff dave. Keep sharing cause sharing is caring. When it comes to web design some good new info is always a blessing. Thanks for the read!

  • CB Reply

    @Mattias: While the semantically driven tabs you suggest would seem interesting and very ‘web 2.0′ at a glance, you really miss out the real advantage with tabs – getting an overview.

    What you suggest is a nice feature, but should use a linked list with a headline such as ‘See also’, ‘Further reading’ or similar.

    OP is dead on.

  • Ashish Reply

    Thanks for this very useful article..

    • Shalini Reply

      Great article. Thanks for sharing,its really helpful at the time to design a website.As they are structural,always aligned, easy to navigate, and even easier to implement.

  • Coffee Maker UK Reply

    I think you first arrive on a sight you need to get a general overview of what is available and tabs give a huge advantage in this respect.

  • Mark Reply

    Very good Article awesome!

Leave a Comment on This Article