Header Tabs

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 navigation items does not change. 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.

When to use Header Tabs

1. There are 3 - 10 primary navigation items.
2. The navigation titles are relatively short and predictable.
3. The number of navigation itmes do not change.
4. The navigation items belong to a single site.
5. You need to represent the highest level navigation options on a site.
6. You need to indicate the user's current location in the set of available options.
7. You need to change the entire page and not a sub-section of content within the page.
8. You need a way to control the highest level of navigation.

Bottom Bar

Header tabs must be accompanied by a bottom bar, placed immediately after the <div class="tabs"></div> tag. If you do not plan on using a button bar or a link bar as your bottom bar, be sure to use the header bar (<div class="headerbar"></div>).

Tab Background Color

<div class="tab background-c1">Tab One</div>

Position Tab Right

Section off specific tabs to the right by adding the "right" class.

<div class="tab right">Tab One</div>

Tab Text Color

<div class="tab"><span class="text-c1">Tab One</span></div>