Breadcrumb · Bootstrap v6.0

Indicate the current page's location within a navigational hierarchy using explicit divider elements.
Use an ordered list with .breadcrumb-item for each page and .breadcrumb-divider elements between them. Leave a divider empty to use the default chevron icon, or add your own separator content. Add .active to the .breadcrumb-link of the current page.
Dividers are added explicitly using .breadcrumb-divider elements. An empty divider renders a default chevron, drawn with a CSS mask so it inherits the divider color (including in dark mode). To use a different separator, add your own content—any SVG icon, text character, or custom markup—which overrides the default.
Leave the .breadcrumb-divider empty to get the built-in chevron. Customize it globally by overriding the --bs-breadcrumb-divider-icon, --bs-breadcrumb-divider-width, and --bs-breadcrumb-divider-height variables.
Add an inline SVG inside the divider to override the default with your own crisp, scalable icon. Use currentColor for the stroke or fill so it inherits the divider color for easy theming.
For simple text-based dividers, just add the character directly.
Use any content you like—different icons, decorative elements, or themed separators.
Since breadcrumbs provide navigation, it’s important to follow these practices:
For more information, see the ARIA Authoring Practices Guide breadcrumb pattern.
Breadcrumbs use local CSS variables on .breadcrumb for real-time customization. Values for the CSS variables are generated from Sass maps unique to each component and applied to the aforementioned class.