Navigation Tabs Design pattern

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

NavigationTabs

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

  • NavigationTabs

    Navigation tabs are used at digg.com

  • spd.org

    Navigation tabs with large clickable areas are used on spd.org.

  • vimeo.com

    Large rounded navigation tabs on the vimeo front page.

  • rei.com

    Clean navigation tabs in use at rei.com.

5 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.
Vote down Vote up
Out of 101 votes, 59.41% like this one.

Related links

See it in action

Related articles