Breadcrumbs

Breadcrumbs are a compact way to show a site or application 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 (KDE Human Interface Guidelines). 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. It is generally good practice not to include links to the current page. (Nielsen Norman Group)
  • 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. (Nielsen Norman Group)
  • Place breadcrumbs above the content, but not above any primary navigation (such as a horizontal or header menu). (KDE Human Interface Guidelines)
  • Avoid using multiple sets of breadcrumbs on one page.

Basic Usage


Types of Breadcrumbs

States

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.

Variations

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. You can find some examples and guidelines for this pattern here.




Edit this page