The breadcrumb component helps visitors understand where they are within a website’s structure and move between levels.



When and how to use it

Use the breadcrumb component to help visitors orient themselves and move between multiple levels of a website.

Use breadcrumbs to illustrate:

  • Progress
  • Page levels
  • Steps

Place breadcrumbs at the top left corner of a page, above the title.

The breadcrumb should start with your 'home' page and end with the H1 of the current page.

How not to use it

The breadcrumb component should not replace the main navigation on a page.

Do not use the breadcrumb component on websites with a flat structure. There should be at least two levels of page structure.


Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes