Navigation Tabs

Tab-based navigation consists of buttons or tabs aligned side by side and it is usually located at the top of the page. Navigation tabs help the users know where they are and find their way around the Website. Tabbed navigation is a good choice when the number of tabs is not likely to change often and the tabs fit on one row. The navigation element should span across the entire width of the page using limited as well as short and predictable titles with the current selected tab clearly highlighted.

Main navigation on CNN.

Main navigation on CNN.

What problem does the pattern solve?

  • The category titles fit on a single row.
  • The category titles are relatively short and predictable.
  • The number of categories is not likely to change often.
  • The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
  • The categories belong to a single site.
  • You need to represent the highest level navigation options on a site.
  • You need to indicate the user’s current location in the set of available options.
  • You need to change the entire page and not a sub-section of content within the page.
  • You need a way to control the highest level of navigation.

When to use it?

  • The category titles fit on a single row.
  • The category titles are relatively short and predictable.
  • The number of categories is not likely to change often.
  • The entire width of the page is needed for content. An alternative approach is to use a left bar navigation
  • The categories belong to a single site.
  • You need to represent the highest level navigation options on a site.
  • You need to indicate the user’s current location in the set of available options.
  • You need to change the entire page and not a sub-section of content within the page.
  • You need a way to control the highest level of navigation.

How to use it?

  • First, design the information architecture of the Website.
  • Present a single-line row of tabs in a horizontal bar at the top of the page. The most common place for it is right under the site’s branding and header.
  • If the first tab is labeled Home then it should point to the site’s home page.
  • The complete tab area is clickable – not just the tab label.
  • Use hover effect to give feedback when the mouse is over a tab.
  • Tab navigation should be maintained on all pages that are linked to by the tab set.
  • When the list of categories becomes too long and suggests the need for a “more…” link, consider using a left bar navigation instead or re-chunking the content.
    Maintaining the metaphor
  • The selected tab should come forward in terms of prominence from the other tabs.
  • Unselected tabs should sit back visually to reinforce the notion of where the user is via the selected tab.
  • The page that is delivered by selection of the tab should be visually connected to the tab via design cues: color, brackets, borders etc. Selection of another tab redraws the entire page and presents the new information tied to the new selection.
  • Never stack multiple rows of tabs as this leads to confusion about the selected layer versus inactive layer.
  • Tabs should always appear in the same locations as a user navigates within the tab set from one tab to another.

Why to use it?

  • Tabs provide context. They offer the ability to give visual indication of a user’s location within a body of information.
  • Tabs build on a real world metaphor. The selected state is reinforced with the file folder tab metaphor of a folder physically in front of the others in the set.
  • Tabs provide navigation. They provide the ability to navigate the site.

Accessibility

  • Allow the user to navigate across the tabs in a logical order with the Tab key.
  • A focused tab can be selected with the Enter key.
  • Indicate the active tab (pane) by one of these alternative means (in addition to visual indication):
    • Include a TITLE attribute with the word “active” into the link that was just activated.
    • Include an invisible graphic with an ALT attribute and a word “active” into the link.
    • Attach an ALT attribute with the word “active” to a graphical element that indicates active link.

Sources

The pattern is based on Navigation Tabs-pattern from Yahoo! Design Pattern Library.

Useful links

Example images (8 examples)