Breadcrumbs

Bootstrap 5 Breadcrumbs component

Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.

Basic example

Breadcrumb in navbar

Very often breadcrumb is placed in the navbar.

Breadcrumb in header

If there is not enough space in navbar, consider placing breadcrumbs in a composition like this below.

Changing the separator

Separators are automatically added in CSS through ::before and content. They can be changed by changing $breadcrumb-divider. The quote function is needed to generate the quotes around a string, so if you want > as separator, you can use this:

It’s also possible to use an embedded SVG icon:

The separator can be removed by setting $breadcrumb-divider to none:

Accessibility

Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as aria-label="breadcrumb" to describe the type of navigation provided in the <nav> element, as well as applying an aria-current="page" to the last item of the set to indicate that it represents the current page.

For more information, see the WAI-ARIA Authoring Practices for the breadcrumb pattern.

Related resources

Also, if you want to support our friends from TW Elements you can also check out the Tailwind breadcrumbs documentation.