Skip to content
Design System

Breadcrumbs

Breadcrumbs are a navigation system used to show a user’s location in the app.

Show developer docs

Design

Section titled “ Design”
Home Item Disabled item Active

In Practice

Section titled “ In Practice”

Using breadcrumbs

Section titled “Using breadcrumbs”

Use breadcrumbs for nested navigation, with each item acting as a link. They show the hierarchical progress from the highest item level to the lowest, one step at a time. This typically starts with the product landing page and goes to the current page or content.

  • Place breadcrumbs at the top left corner of the screen, above the page title.
  • In product, avoid using the topmost level of the hierarchy unless the navigation sidebar is collapsed.

Accessibility

Section titled “ Accessibility”
  • Add aria-current="location" on the last breadcrumb item so screen readers can state the current page.
  • Make sure your breadcrumb items reflect the page or product section titles exactly for screen readers.

Design resources

Section titled “ Design resources”
View component in Figma