Breadcrumbs

A breadcrumb is a small text path, often located at the top of a page or screen. Breadcrumbs show the user where they are by displaying all parent page links. This kind of orientation is especially important if people are directed to deeper pages on the site from external sources. Breadcrumbs are especially useful on websites with many related categories and subcategories.

Best practices

• Use breadcrumbs when you have a large amount of content organized in a strict linear structure or hierarchical structure on your site.
• Display breadcrumbs at the top of inner pages to help users navigate to parent pages.
• All parent page links should be displayed.
• Don’t use breadcrumbs for single-level websites that have no logical hierarchy or grouping.

How it works

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.