Skip to main content

Breadcrumbs

Inform users about their location within the app content.

Breadcrumbs display the user's current location within the app hierarchy and provide a simple way to return to the higher-level states.

View in StorybookExternal link icon

Behavior​

  • Breadcrumbs with more than five elements collapse and display a truncation menu, which users can select to view all elements.

  • Element titles with over 30 characters are truncated.

Usage​

  • Use breadcrumbs for apps with more than two levels of hierarchy.

Best practices​

  • Avoid wrapping breadcrumbs to the following line.

  • Avoid truncating the first breadcrumb element (typically, a Home link).

  • Consider using a back button for apps with fewer than two levels of hierarchy.

    The back button returns users to the previous page in the app hierarchy, and you can label the button with the destination page title.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Page link's visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Breadcrumb Pattern for guidance on expected keyboard interactions, including roles, states, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.