Free tools Windows power users keep installed
One-click scans. No signup required.
Bootstrap breadcrumbs are a short list of links showing where the current page sits in a site hierarchy. In Bootstrap 5.2, put an ordered list with .breadcrumb inside a labeled <nav>, then mark the final, non-linked item with aria-current="page". Bootstrap CSS supplies the separators; you can change them with a CSS custom property or Sass.
Bootstrap 5.2 breadcrumb markup
This example follows the Bootstrap 5.2 breadcrumb component documentation. The list items represent successive levels in the hierarchy, and the final item names the page the visitor is already viewing.
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>The .breadcrumb class styles the list, while .breadcrumb-item styles each level and its separator. The last item has active and aria-current="page"; in this basic pattern it is text, not a link. Replace the example labels and paths with the actual hierarchy and URLs for your site.
Why the navigation and current-page attributes matter
A breadcrumb is navigation, so wrap the list in a <nav> landmark. Give that landmark a meaningful accessible name; Bootstrap’s example uses aria-label="breadcrumb". This helps distinguish it from other navigation landmarks on the page.
#1 Best Overall
Place aria-current="page" on the final item to identify it as the current page to assistive technology. The visual active class and the ARIA attribute have different roles: the class controls styling, while the ARIA attribute communicates current-page status.
Change or remove the separator
Bootstrap 5.2 uses a CSS custom property for the breadcrumb divider. Set it on the navigation element to change the separator for this breadcrumb without changing the list markup:
<nav style="--bs-breadcrumb-divider: '>'" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Library</li>
</ol>
</nav>The value is quoted because the divider is treated as CSS content. Bootstrap’s documentation also demonstrates using an SVG data URI or suppressing the divider. For a site-wide or build-time customization, the Sass variable $breadcrumb-divider is the alternative.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallCrashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minute| Approach | Best suited to | Where you set it |
|---|---|---|
| CSS custom property | A local override or a change in CSS without recompiling Bootstrap Sass | On the breadcrumb container or in a CSS rule |
| Sass variable | A customization that should be applied when compiling Bootstrap styles | In the Sass setup before Bootstrap is compiled |
Version and setup notes
The markup and divider examples above are specifically based on Bootstrap 5.2’s component documentation, not a claim that every detail is identical in every Bootstrap release. Bootstrap 5.3’s migration notes describe breadcrumb styling changes and the CSS custom property used to change dividers. Check the documentation for the version installed in your project before copying component-specific customizations.
Rank #3
If you are starting a project on Bootstrap 5.3, its setup documentation describes loading production-ready CSS and JavaScript from a CDN without a build step and lists version 5.3.8 assets. When using those CDN tags, copy the matching integrity attributes from that page for the exact asset version you select; an integrity hash must correspond to the file it accompanies.
Quick Recap
- Bootstrap 5.2 breadcrumb component — markup, accessibility, and divider customization.
- Bootstrap 5.3 migration notes — changes relevant to moving from earlier versions.
- Bootstrap 5.3 setup documentation — CDN setup and listed assets.
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.
