Breadcrumbs are a compact way to show navigation hierarchy. They are unobtrusive and not distracting.
They not only show users where they are, but provide an easy way to allow them to navigate up multiple levels.
They only require a small amount of space and are very familiar to most users. The Nielsen Norman Group writes that "user testing shows many benefits and no downsides to breadcrumbs for secondary navigation."
When to use breadcrumbs
As stated above, breadcrumbs are considered secondary navigation, meaning that they shouldn't be provided as the only way for users to navigate.1 This is because they are not as obvious or noticeable as other navigation methods, such as Tabs.
You can use breadcrumbs when there is no visible way to navigate back to the parent page. Breadcrumbs are not needed, for example, with hierarchical vertical navigation, such as a tree control, because the navigation path is always visible.
Breadcrumbs can be preferable to other hierarchical navigation controls when space (especially in the horizontal direction) is constrained, such as on mobile. They might not be ideal for very deep hierarchies, however, where they can become very long. See the variations below for how they can be condensed in these cases.
How to use breadcrumbs
- Include the name of the current page as the last item in the breadcrumb, but don't link it.2 It is generally good practice not to include links to the current page.
- Even though the title of the page may be indicated in the breadcrumb, it is good practice to repeat it below, as the breadcrumb itself is often small.
- Use a single character to separate the links. The most common separators for breadcrumbs are the ">" and "/" characters.
- There is some debate about whether breadcrumbs should show the site/application hierarchy or the path that the user has taken (i.e., more akin to the origin of the name "breadcrumb"). However, most guidelines recommend the former, where the links show the site hierarchy, rather than user's path.2
- Place breadcrumbs above the content, but not above any primary navigation (such as a horizontal or header menu).1
- Avoid using multiple sets of breadcrumbs on one page.
Breadcrumbs should be constructed from standard links and text, and should inherit the same states. As with standard links, breadcrumb links may have normal, hover, active, and visited states.
Condensed Breadcrumbs - You may use this pattern when the number of items exceeds about 5 or as space requires. Clicking on the "..." can expand the entire list, or only the last few items.
Dropdown Breadcrumbs - This is a less common pattern that combines breadcrumbs with a vertical menu to allow users to navigate non-linearly. It is not standard and should be used sparingly. See examples and guidelines for this pattern.