Design Pattern Library

Breadcrumbs

Problem Summary

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.

Breadcrumb showing the Things To Do page for Boston, MA in Yahoo! Travel's travel guide

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.

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

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 ( > ).
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".)

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.

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.

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.

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.