Breadcrumbs

Indicate the current page’s location within a navigational hierarchy.

Example

Use <bs-breadcrumb> with linked <bs-breadcrumb-item> entries to show the current page within a navigation hierarchy. Mark the final item with is-active="true" when it represents the current page.

aspnet 

<bs-breadcrumb>
    <bs-breadcrumb-item is-active="true">Home</bs-breadcrumb-item>
</bs-breadcrumb>
<bs-breadcrumb>
    <bs-breadcrumb-item href="#">Home</bs-breadcrumb-item>
    <bs-breadcrumb-item is-active="true">Library</bs-breadcrumb-item>
</bs-breadcrumb>
<bs-breadcrumb>
    <bs-breadcrumb-item href="#">Home</bs-breadcrumb-item>
    <bs-breadcrumb-item href="#">Library</bs-breadcrumb-item>
    <bs-breadcrumb-item is-active="true">Data</bs-breadcrumb-item>
</bs-breadcrumb>

Dividers

Breadcrumb dividers are added by Bootstrap CSS. Set separator on <bs-breadcrumb> when a single breadcrumb needs a different divider without changing the global stylesheet.

aspnet 

<bs-breadcrumb separator="&gt;">
    <bs-breadcrumb-item href="#">Home</bs-breadcrumb-item>
    <bs-breadcrumb-item href="#">Library</bs-breadcrumb-item>
    <bs-breadcrumb-item is-active="true">Data</bs-breadcrumb-item>
</bs-breadcrumb>
Sets the Bootstrap breadcrumb divider custom property for the component.

Accessibility

Breadcrumbs are navigation landmarks, so provide a meaningful label with aria-label. The active item should identify the current page; is-active="true" emits that state for the final breadcrumb item.

aspnet 

<bs-breadcrumb aria-label="breadcrumb">
    <bs-breadcrumb-item href="#">Home</bs-breadcrumb-item>
    <bs-breadcrumb-item href="#">Docs</bs-breadcrumb-item>
    <bs-breadcrumb-item is-active="true">Breadcrumbs</bs-breadcrumb-item>
</bs-breadcrumb>
Use an accessible label for the breadcrumb navigation, and mark the current page with is-active.

CSS

Variables

Breadcrumbs use Bootstrap local CSS variables for spacing, divider color, active color, and the divider value. The helper exposes the common per-component divider case through separator.

Sass variables

Use Sass customization for global breadcrumb divider, padding, margin, and active-color defaults.