Top Navigation Bar

Working Solution · Last modified December 9, 2009

The user needs to locate content and features necessary to accomplish a task. A top navigation bar provides quick access to categorized content in a vertically compact display space.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to locate content and features necessary to accomplish a task.

When to Use This Pattern

  • Use when there are 2-12 category titles
  • Use when the category titles are relatively short and predictable
  • Use when the number of categories are not likely to change.
  • Use to present the highest-level navigation options on a single web product.
  • Use to present the second-highest-level navigation options when used with tab sets.
  • Use instead of left-nav bars if the width of the body of the page is of critical importance.
  • Use instead of tabs when it would be prohibitively expensive to track and display the current location of the user as a state in the navigation control.
  • Use when the categories belong to a single product.

What's the Solution?

  1. Present navigation as a series of links in a single line of text in a horizontal bar under the header(s), if any.
  2. This navigation bar can either represent the highest level or the second-highest level when combined with a tab set.
  3. If the top-nav bar is being used alone, use "Home" as the first category in the set. This should point to the site's home page.
    • If, however, the top-nav be is being used under a tab set, the first tab should be labeled home and have that functionality instead.
  4. Use a space and a pipe character "|" (or centered dot, or similar visual) to separate each category in the nav-bar.
  5. All pages that are linked to by a top-nav bar must display the top-nav bar themselves.
  6. When the list of categories becomes too long and suggests the need for a "more..." link, consider using a left-nav bar.
  7. Combine with tab sets for higher levels of content.
  8. Combine with left-nav bars for secondary or tertiary levels of content.

Focus on the content of the domain (the user's mental model) rather than on the layout of the page, because the most common error is cobbling together a list of items that don't make sense together:

  1. Minimize overlap between categories as much as possible.
  2. Make category boundaries as crisp as possible (i.e., easy to guess whether desired item is within or outside a category)
  3. Avoid over-generalized or over-specific category names.

Why Use This Pattern?

A top nav bar provides a convenient compact display of category options to the user, providing access to a wide variety of organized content.