Free tools Windows power users keep installed
One-click scans. No signup required.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap breadcrumbs use a list inside a navigation landmark: apply .breadcrumb to the list, .breadcrumb-item to each item, link the ancestor pages, and mark the final item as the current page. The official Bootstrap documentation identifies v5.3.8 as the current release and documents the component in its v5.3 guide.
Build a basic Bootstrap breadcrumb
Use a real link for each ancestor page and make the current page the last item. Bootstrap accepts either an ordered or unordered list; an ordered list is a natural choice when the trail’s sequence matters.
<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 example URLs and labels with the actual hierarchy on your site. The active class supplies Bootstrap’s current-item styling; aria-current="page" identifies the current page for assistive technology.
Recommended Free Tools
Change the breadcrumb separator
Bootstrap generates separators with CSS rather than requiring separator characters in the markup. This keeps the trail’s items focused on navigation and lets you adjust its appearance independently.
#1 Best Overall
Set a text separator for one breadcrumb
Override the CSS custom property on the navigation element to change that breadcrumb’s divider to a greater-than sign:
<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>Use the same --bs-breadcrumb-divider property in a stylesheet instead of an inline style if that better fits your project. The default divider is a slash; a text symbol such as > is another option.
Customize the divider with Sass or an SVG
For a Sass-based Bootstrap build, set $breadcrumb-divider before compiling Bootstrap, for example: $breadcrumb-divider: quote(">");. Bootstrap also documents an embedded SVG divider. When using SVG data in CSS, encode or escape reserved characters such as <, >, and # so the value is parsed correctly.
Bootstrap exposes $breadcrumb-divider-flipped for the right-to-left counterpart. Choose a divider that reads correctly in the page’s direction and matches the surrounding design. CSS custom properties for breadcrumbs are available from Bootstrap v5.2.0; Sass customization is also supported.
Make the breadcrumb accessible
Give the <nav> a meaningful label, such as aria-label="breadcrumb", and put aria-current="page" on the final item. These attributes help identify the type of navigation and which destination represents the current page. The item order should reflect the actual hierarchy, and ancestor items should link to their respective pages.
The W3C ARIA Authoring Practices Guide’s breadcrumb example uses an ordered list and explains how CSS-generated separators can remain visual-only, avoiding redundant announcements by screen readers. The W3C describes that example as illustrative rather than production-ready and advises testing code with assistive technologies before relying on it in production.
Rank #4
Check the styling in your site
Bootstrap’s component classes do not guarantee that a breadcrumb is accessible in every context. Bootstrap says accessibility depends on the author’s markup, additional styling, and scripting; it also warns that some default color combinations may not meet referenced contrast ratios. Check the rendered text and divider against their backgrounds in your site’s actual theme, including hover and focus states for links.
Bootstrap breadcrumb documentation and license
See the official Bootstrap breadcrumb documentation for the component examples, divider options, Sass variables, and accessibility notes. Bootstrap’s documentation identifies the current release as v5.3.8. The breadcrumb page states that Bootstrap code is licensed under MIT and the documentation under CC BY 3.0.
Quick Recap
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.
