Navigation Tabs

Problem

People like to know where they are and where they can go.

Solution

Use one or two rows of tabs at the top of your site or application for global navigation.

Context

• You have several major content areas/categories but usually no more than 10—having more might suggest an alternative menu structure such as down the left side.
• These areas won’t change often—spatial memory will kick in and changing top-level navigation often is not a good idea, especially on more concrete metaphors like tabs.
• You want an alternative or complement to Breadcrumbs for helping people know where they are.
• The area titles are relatively short.
• You want to use the entire width of the page for content.

Rationale

Tabs are one of those physical metaphors that have moved into the digital world. Conceptually they function in the same way—you have a grouping of content that you stick into a section that has a tab on it. The tab helps people find the content under that heading, and while looking at the content under a tab, the tab can also function to reassure people of where they are/what they’re looking at.

But digital tabs of course do diverge from their physical counterparts. They can support multiple rows, usually no more than two, of hierarchy, and they don’t literally contain their content, though it is best to visually show the content area that the tabs will affect—a simple bar across the top below the tabs can be enough to indicate it affects the whole page.

Navigation tabs are a nice way to blend the navigational aspects of a menu with the reassurance of a breadcrumb sign post, to help people know where they are. This latter is especially helpful with Web sites because people can easily be dumped into the middle of a site and need some way to orient themselves as to where they are on that site and where they can go from there.

While tab usage in software has a long and illustrious history, their use for navigation is somewhat newer; however, their familiarity is a boon and should not be discounted as a possible navigation device. Just keep in mind they don’t scale up very well or you’ll end up with the tab fiasco that was amazon.com for a while.

Implementation

Make sure you can logically group your content into 10 or fewer groups that have short labels and are not likely to change or increase in number beyond that limit.

Determine if you want to do one or two rows. Since the limit is so small, you often will need a secondary navigation device. This can be done as a second row of links directly under the tab row that change as the tab changes, or you can do something else such as links along the side or bottom.

You can follow the standard Web navigation convention of putting your main content tabs on the left and supplementary (such as the obligatory “about us,” “contact us,” “my stuff,” and the like) on the right, but you don’t have to.

For the tabs, the whole tab should select the tab and navigate to that content—not just the label, and once selected, you should change the visible aspects of the tab (such as color saturation or brightness) to indicate it is the currently selected tab—usually this means making it visually more prominent. If you have a secondary nav, update it. You may want to disable the selected tab’s navigation target while selected, unless you do have secondary nav, in which case it can be a useful mechanism to get to the homepage for that area.

Do not move tabs around or reorder them as part of normal behavior as this is very disorienting.

For accessibility, you should allow people to navigate the tabs in a rational order using the tab key and let Enter mean selection. For Web apps, you should complement the active tab with an “active” value on the TITLE attribute or add an invisible image with that value for the ALT attribute.

Help Me Get There

Infragistics has some tools that can jumpstart your efforts to implement this pattern. Broken down by technology, they are as follows.

ASP.NET

Navigation Tabs pattern is implemented in the following ASP.NET control: WebTab. Check out the samples browser to see it in action.

Windows Forms

You can use the NetAdvantage for Windows Forms WinTabControl to implement this pattern.

WPF

You can implement this pattern using the NetAdvantage for WPF XamTabControl.

Sources

UC Berkeley Web Patterns, Navigation Tabs

Yahoo Design Pattern Library, Navigation Tabs

Patterns in Interaction Design, Tabs

Tags

Navigation.