Navigation Tabs

Working Solution · Last modified July 15, 2009

Presenting a persistent single-line row of tabs in a horizontal bar below the site branding and header is a way to provide a high level navigation for the website when the number of categories is not likely to change often. The 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 to maintain the metaphor of file folders.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to navigate through a site to locate content and features and have clear indication of their current location in the site.

When to Use This Pattern

  • There are 3 - 10 category titles.
  • 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.

What's the Solution?

  • Present a single-line row of tabs in a horizontal bar under the site 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.
  • 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.

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 Use This Pattern?

  • 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 Yahoo's graphic that indicates active link.