Breadcrumbs

Best Practice · Last modified July 15, 2009

Displaying a horizontal list of labels that reflect the location of the current page in the hierarchy of a website provides context and helps the user understand where on the website he is and enable him to easily navigate up in the site hierarchy. The labels should match the page titles function as hyperlinks to that page and be divided with delimiters such as greater-than signs (>) having the current page as the last label.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

The user needs to be able to navigate up (towards the root page) and have an understanding of where she is in relation to the rest of the site.

When to Use This Pattern

  • The page displayed is within a hierarchy of pages and is not the topmost page.
  • The user cannot easily navigate through the hierarchy via other local navigation methods. For example, if the page is fairly deep in a hierarchy, the breadcrumb maybe the simplest way to provide navigation.
  • The page may be arrived at from an external source (e.g., a search results page) and the user will need a sense of context.

What's the Solution?

  • Display a horizontal list of labels starting with the topmost page and continuing down the site's hierarchy to the current page.

Labels

  • Where possible, labels should match the title of their corresponding page.
  • Use the rules of title capitalization for labels in the breadcrumb.
  • Separate each label with a greater-than sign ( > ) or equivalent delimiter.
  • Include the title of the current page as the last label in the breadcrumb.
  • Do not use the label "Home" for the topmost page. Instead use the specific name for the topmost page (e.g. "Travel" or "Weather" rather than "Home".)

Hyperlinks

  • Hyperlink all labels in the breadcrumb except the last one (which corresponds to the title of the current page.)
  • Never hyperlink the greater-than sign ( > ) or the spaces that separate the labels.
  • The hyperlink should be styled the same regardless of whether it has been visited or not.

Other Considerations

  • Never display a breadcrumb on the site's topmost page.
  • The breadcrumb sometimes corresponds to the user's recent browsing history, but is not equivalent to it.
  • Dynamically include the titles of user-generated content pages as appropriate.

Why Use This Pattern?

  • Breadcrumbs provide context relative to the rest of the site.
  • Breadcrumbs provide a way to navigate up the site hierarchy.
  • The term 'Breadcrumb' can be misleading. It implies that this is the trail that got us here and will take us back the way we came. In reality, our Breadcrumbs pattern is more like Homeward Path as described in the Diemen Patterns Repository. However, we chose the name 'Breadcrumbs' since it is the most common name for this idiom.

Accessibility

  • Each breadcrumb label should match the corresponding page title.
  • Allow the breadcrumb and each link to be navigated to with the Tab key.
  • When an individual breadcrumb label has keyboard focus, the Enter key will navigate to the linked page.