Breadcrumbs

Breadcrumbs help users understand where they are within a website’s structure. They also help users navigate the site’s hierarchy.

Breadcrumbs let users go back to previous pages or levels within a site. They give users more information than if users only used the Back button. They help users understand the organization of the website.

HTML

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

Import

Label

When to use

For helping users understand the hierarchy and complexity of websites
For letting users move between different levels of a website

When not to use

For sites that aren’t very deep
On the homepage of a website
For linear relationships, such as step-by-step processes or applications

Open all

Accessibility for breadcrumbs

Use the <nav> element. This allows assistive technology to identify the breadcrumbs as a navigation landmark.
Use ordered lists ol for breadcrumbs and list items li for each item. Assistive technology will read the number of breadcrumb links to the user.
Use ARIA to give context to the user. Use aria-label="Breadcrumbs" on the main element and aria-current="page" on the current page.
Use a blank alt attribute for the separators between breadcrumb links. Separators are decorative so make sure screen readers can't read them. Decorative images can cause cognitive clutter.
Use a text size large enough to select at small widths. Breadcrumbs are often smaller than normal text. Users still need to identify them especially on mobile devices or smaller screens.
Make sure all users can perceive the breadcrumbs. Use a background color with a contrast ratio of at least 4.5:1.

Best practices for breadcrumbs

Avoid wrapping text when possible, especially on mobile devices. Configure them to only show the first and last items in a breadcrumb list. Use the page title for the breadcrumb links.
Start the breadcrumb with the word Home or top-level category pages. Don’t use a house icon alone for the Home breadcrumb link.
Always place breadcrumbs before the <main> landmark. A skip link component will take users to the main content. Users will skip all other navigational elements, including breadcrumbs.

Open all