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
When the context for the current page is clear from the main navigation
On the homepage of a website or on section landing pages
When using side navigation with main navigation
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. The separators should not be readable by screen readers because they are decorative. 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. Use relative font sizes like percentages or ems rather than pixels. Relative font sizes give more flexibility to adjust the font size in relation to the screen. Pixels are absolute and don’t offer flexibility.
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

Consider alternatives to wrapping. Long breadcrumb trails might wrap. You can configure them to only show the first and last items in a breadcrumb list. Or, you can also only show a page’s direct parent. These techniques are useful on mobile devices.
Use the page title for the breadcrumb links.
Start the breadcrumb with the word Home. Don’t use a house icon 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