Use Bootstrap’s breadcrumb component to show a page’s location in your site hierarchy. The copyable example below follows the official Bootstrap v5.3 structure; replace its labels and URLs with your real pages, and make sure your project loads the matching Bootstrap CSS.
Copy and adapt this Bootstrap breadcrumb
<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">Current page</li>
</ol>
</nav>This is an adaptation of the structure in Bootstrap’s v5.3 breadcrumb documentation. Each linked item represents an ancestor in the hierarchy; the final item identifies the page currently being viewed. Breadcrumbs supplement a site’s main navigation rather than replacing it.
As an Amazon Associate I earn from qualifying purchases.
How to add breadcrumbs in Bootstrap
- Confirm the framework version. Use markup and styling instructions that match the Bootstrap CSS version your project loads. The v5.3 example here should not be mixed blindly with older documentation such as Bootstrap v4.0 breadcrumbs.
- Place the component in a navigation landmark. Wrap the list in
<nav>and give it a meaningful label, such asaria-label="breadcrumb". - List the route hierarchy in order. Use an ordered list with
.breadcrumb, and give each list item.breadcrumb-item. Link the ancestor pages to their actual site destinations. - Mark the current page. Give the last item the
activeclass andaria-current="page". Keep its visible label consistent with the page being viewed.
Bootstrap v5.3 also permits an unordered list. Its documented separators are generated with CSS rather than written between the list items.
Change or remove the breadcrumb separator
Bootstrap v5.3 uses a slash as the default divider. For a local text change, set the documented CSS custom property on the breadcrumb:
#1 Best Overall
<nav aria-label="breadcrumb">
<ol class="breadcrumb" style="--bs-breadcrumb-divider: '>';">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item active" aria-current="page">Current page</li>
</ol>
</nav>For a reusable stylesheet rule instead of an inline style, set the property in your CSS:
.breadcrumb {
--bs-breadcrumb-divider: '>';
}The documentation also shows an SVG divider and how to remove the divider by setting the custom property to an empty string. If you embed SVG data in a CSS custom property, reserved characters must be escaped or URL-encoded; Bootstrap’s Sass example uses its escape-svg() helper. See the v5.3 component reference for those forms.
Choose CSS or Sass for customization
| Approach | Use it when | What it changes |
|---|---|---|
| CSS custom property | You want a local divider adjustment without recompiling Bootstrap Sass. | Set --bs-breadcrumb-divider on the breadcrumb. |
| Sass variable | Your project already manages Bootstrap through Sass and needs a compiled theme setting. | Change $breadcrumb-divider before compiling. |
Bootstrap documents both methods; the right choice depends on how the project handles styles. The v5 migration notes explain that the divider custom property enables changes without recompiling CSS.
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 minuteWhat changed in Bootstrap 5
Bootstrap’s v5 migration notes say the default breadcrumb appearance was simplified by removing padding, background color, and border radius. Those notes also document the divider custom property. The v4.0 reference describes the same broad navigation purpose, but its examples belong to that earlier version. The cited v5.3 documentation is version-specific and does not establish which Bootstrap release is newest today.
Quick Recap
Rank #3
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.
