Left Navigation Bar

Working Solution · Last modified December 9, 2009

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

A left navigation bar provides quick access to categorized content in a horizontally 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 at least 4 categories.
  • Use when there may be more than 10 categories.
  • Use when category titles may be long or system-generated.
  • Use when page width is not an issue.
  • Use to suggest lower-level navigation; i.e., when the categories presented are children of the page title in the information hierarchy.
  • Use when faceted-narrowing controls are needed.
  • Use instead of Tabs and Top Navs for second- and third-level navigation options for greater discoverability.
  • The categories belong to a single product.

What's the Solution?

  1. Present navigation as a list of links in a single column beneath the page title and left-aligned on the page.
  2. Combine with Tab Sets and/or top-nav bars for higher levels of navigation.
  3. If used without a Tab Set or top-nav bar, the first item in the left-nav bar should point to the product's home page.
  4. Left-nav bars offer the ability to give visual indication of location within a body of information. The "selected state" should be identifiable through the use of color, type style, or other means.
  5. All pages that are contained in a left-nav bar must themselves display an identical left-nav Bar and must indicate the correct location.
  6. Each "cell" surrounding each item in the left-nav bar should be clickable, not just the label.
  7. Present a maximum of two levels of hierarchy in a left-nav bar.
  8. When two levels of hierarchy are present and there are a great many categories and subcategories, consider using a collapsible left-nav bar (or accordion menu).

Clickable Parents vs. Semantic Parents

Clickable Parents (Left) vs. Semantic Parents (Right)

When categorizing the list of links in a Left-nav Bar, the category names can be static (semantic) or active (clickable). Semantic parents only label the links below them. Clickable parents not only label the links below, they point to a unique destination page.

  • Never mix clickable parents and semantic parents in the same Left-nav Bar.

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 left nav bar provides a convenient compact display of category options to the user, providing access to a wide variety of organized content.


When implementing 'fly-out' or 'sliders' menus, a careless implementation would allow pointing-device users to access the submenu (via mouseover) as well as the active link, whereas keyboard users would only be able to access the latter. The solution is to make sure the 'trigger' is something other than the Enter or Return key (which is often used when the menus rely on semantic parents).

Open Questions

  • How do we deal with long text? Should we avoid wrapping text in the left column navigation?
  • Why do there need to be at least 4 categories? Any recommendations for what designer should do when there are 3 or fewer categories?
  • And if page width is an issue, are there any alternative recomendations?

Discuss Navigation Patterns