Navigation Tabs Edit
Problem summary
The user needs to navigate among sections of a website and while having clear indication of what section the user is currently looking at.
Example
Usage
- Use when there are more than 2 sections
- Use when there less than 8-10 sections depending on the length of each section name.
- Use when section names are relatively short
- Use when you want the navigation to fill the entire width of a page
- Use when you want to provide a list of the highest available sections/subsections of the website
- Do not use when wanting to show content-specific data. For instance for showing latest articles
- Do not use when there is no need to single-out the currently selected option
- Do not use when the list of sections or categories call for a “more…” link. Then consider another navigation pattern.
Solution
- A horizontal bar contains the different sections or categories of your website.
- Each section or category is represented by a tab that resembles a button. This is why the whole button should be clickable, and not just the text that labels the section.
- Optionally, a bar below the top bar can contain subsections of the currently selected item in the top bar
- The same navigation tab is used on all pages that is linked from the navigation tab.
- The same structure (order) of the navigation tabs should be maintained from page to page, so that the user can relate the navigation of the different pages to each other.
- The current selected tab should visually stand out compared the the not selected tabs.
- If subsections are used (a second horizontal bar below the top bar) there should be a clear visual connection between the currently selected top tab and the bar below showing subsections.
Rationale
- Navigation tabs lends itself from the physical metaphor of a folderes in a file-cabinet and is thus familiar to the user.
- Navigation tabs provide a clear visual indication of what content can be found on a website and places the current location in context by highlighting it.
More example images of the 'Navigation Tabs' pattern
-
-
Navigation tabs are used at digg.com
-
Navigation tabs with large clickable areas are used on spd.org.
-
Large rounded navigation tabs on the vimeo front page.
This document is in version 2 and was last updated on Aug 9, 2009 by makakin. The original author of the design pattern was Anders. Edit this pattern.
Related information
Collection
Related patterns
Related links
See it in action
Navigation Tabs has 2 comments
-
5 months ago
Rob McKeown
13 Oct 2009
I think it is important to add that the background color of the selected tab should match (or at least seamlessly transition into) the background color of the “contents” of the tab. This visually ties the content to its tab.
-
4 months ago
Hugo Schotman
6 Nov 2009
Note that Jakob Nielsen advises against using tabs for navigation. Amazon has stopped using tabs for their navigation as well.
See:
http://www.useit.com/alertbox/tabs.html