Breadcrumbs

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

Bootstrap 5

Also, visit our documentation page.

Example

Use an ordered or unordered list with linked list items to create a minimally styled breadcrumb. Use our utilities to add additional styles as desired.

Dividers

Dividers are automatically added in CSS through ::before and content.

It’s also possible to use an embedded SVG icon. Apply it via our CSS custom property.

You can also remove the divider setting --bs-breadcrumb-divider: ''; (empty strings in CSS custom properties counts as a value).