ℹ️ This feature doesn’t have a corresponding React component yet.

Breadcrumbs show users where they are in the website hierarchy and how to navigate back/up to previous levels or content. They are best positioned within the page’s primary <header> element, when possible.

Breadcrumbs should sit between the primary navigation and the page title.

The breadcrumb container class should be applied on a <nav>, wrapping the list and its items.

• Use the --compact and --inline List component for the list styles.

Visually, breadcrumbs should remain in proximity to primary navigation elements and the page title.

Use the .bc-list--compact and .bc-list--inline variants from the List component for the list styles.

• Provide the <nav> with an aria-label (eg “Breadcrumb navigation”).
• The last link in the set represents the current page.
• Use ordered lists (<ol>).

The endpoints linked and their order should reflect the hierarchy of the website. That is, the current page a user is on should be the child of a page it was navigable from.

Do not compose breadcrumbs dynamically from a user’s browsing/path history.

Do not make the final breadcrumb --- the current page --- an anchor. This is to avoid confusion given it would link to the page the user is already on. An alternative would be to use an anchor in conjunction with aria-current="page", however this may still cause confusion.

Do not use breadcrumbs on the top-level page where there would only be the one item, eg the homepage.

• List (Component)