Bootstrap breadcrumbs show where a page sits in a site hierarchy. In Bootstrap 5.3, the basic pattern is a labeled <nav> containing an ordered list, with ancestor pages linked and the current page marked with aria-current="page". You can change the separator with a local CSS custom property or set a build-time default with Sass.
Bootstrap breadcrumb example
Bootstrap describes the component as a way to “Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.” The standard pattern uses a navigation landmark, an ordered list with .breadcrumb, and a .breadcrumb-item for each entry. Ancestors link to their pages; the final item represents the current page.
As an Amazon Associate I earn from qualifying purchases.
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/library/">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>Replace the sample paths and labels with the real hierarchy for your site. This follows the structure documented in the Bootstrap 5.3 breadcrumb documentation.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Make the breadcrumb accessible
Give the navigation landmark a meaningful accessible name, such as aria-label="breadcrumb". Mark the current page with aria-current="page"; the active class supplies Bootstrap’s visual state, while the ARIA attribute identifies the current location to assistive technology. Bootstrap points to the WAI-ARIA Authoring Practices breadcrumb pattern for additional guidance.
#1 Best Overall
How to change the Bootstrap breadcrumb divider
Bootstrap generates separators with CSS. In v5.3, set the --bs-breadcrumb-divider custom property on the breadcrumb instance to change its divider without recompiling Sass. For example, to use a greater-than sign:
<nav aria-label="breadcrumb" style="--bs-breadcrumb-divider: '>';">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>This is useful for a one-off instance or a page-level variation. Bootstrap also documents an embedded SVG divider and an option to remove the divider; choose a form that fits your design rather than assuming one is universally preferable. See the component documentation for those examples.
Rank #2
Choose a local CSS override or Sass configuration
| Approach | Use it when | Setting |
|---|---|---|
| CSS custom property | You want to change a rendered breadcrumb instance without rebuilding Bootstrap’s Sass. | --bs-breadcrumb-divider |
| Sass variable | You want a build-time divider default in a Sass customization. | $breadcrumb-divider; account for Sass string quoting. |
Bootstrap documents local breadcrumb CSS variables as available since v5.2.0. The Bootstrap v5 migration notes also record that breadcrumb defaults were simplified by removing padding, background color, and border radius, and that the divider custom property was added for easier customization.
Check your Bootstrap version before adapting older code
This guide follows Bootstrap v5.3 documentation; it does not establish a separate 2026 Bootstrap release. Older versions may differ in markup or default styling, so identify the version used by the site and consult that version’s documentation before copying a pattern or CSS override.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Breadcrumbs and steppers are different patterns
Bootstrap’s examples include custom icons and stepper-style components. A hierarchical breadcrumb tells readers where the current page sits within a site. A stepper instead presents progress through a sequence of tasks or stages. A visual treatment can borrow ideas from either, but use the pattern that reflects the interface’s actual purpose. See the Bootstrap 5.3 examples.
Quick Recap
Best Value
Rank #4
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
