Component

Breadcrumb

Published on

Description

The Breadcrumb component lists the pages between the home page and the current page. Pass items as an array of { href, text } objects, ordered from the home page to the current page.

Use a breadcrumb on sites with three or more levels of hierarchy. Place it before the <h1>.

Example

Open in new tab
View HTML markup 
<nav class="breadcrumb" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/component">Components</a></li>
    <li><a href="/component/breadcrumb" aria-current="page">Breadcrumb</a></li>
  </ol>
</nav>

Accessibility

  • The list sits in a <nav> landmark named "Breadcrumb". Set label to translate the name.
  • The links are in an <ol>, so screen readers announce the number of levels.
  • The last link has aria-current="page", so screen readers announce it as the current page.
  • CSS draws the separators. Screen readers skip them, and they flip in right-to-left languages.
  • Each link is at least 44 by 44 pixels.

References

  • Links — for general-purpose navigation
  • Scrollspy — for navigation within a page

Variables

None