Crashes, 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 minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11iTechGuides 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 need only a navigation landmark, a list, and the framework’s breadcrumb classes. In Bootstrap v5.3, the component supplies the separators with CSS, so you can change their appearance without changing the page hierarchy in your HTML.
How do I add breadcrumbs in Bootstrap?
Use a <nav> element around an ordered or unordered list. Apply .breadcrumb to the list and .breadcrumb-item to each list item. Link the previous locations and mark the final item as the current page.
<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 labels and paths with the actual hierarchy and destinations on your site. Ancestor items should lead to useful pages; the final item identifies where the visitor is now. A page at the top of a hierarchy can use a single current item. See Bootstrap’s v5.3 breadcrumb documentation for the documented component pattern.
How do I change the Bootstrap breadcrumb separator?
Bootstrap v5.3 sets the divider through the --bs-breadcrumb-divider CSS custom property. The default separator is a slash. For a simple text alternative, set the property on the navigation element:
#1 Best Overall
<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>In HTML source, encode the greater-than character as > inside the attribute; the browser interprets it as >. Bootstrap also supports changing the divider through the $breadcrumb-divider Sass variable when you compile Sass. Its documentation shows an embedded SVG as another option; because SVG data URLs contain characters with special meaning in CSS, escape or URL-encode them when assigning the value directly. To omit separators, set the CSS property to an empty string or use $breadcrumb-divider: none in Sass. See the component documentation for the CSS, Sass, and SVG forms.
| Choice | How to configure it | Trade-off |
|---|---|---|
| Text divider | Set --bs-breadcrumb-divider on a component, or configure $breadcrumb-divider in Sass. |
Simple to maintain and easy to fit to a site’s visual style. |
| SVG divider | Set the property to an SVG data URL, escaping or URL-encoding reserved characters. | Can provide a directional or branded symbol, but is more complex to encode and maintain. |
| No divider | Set the CSS property to an empty string or the Sass variable to none. |
Removes the visual separator; check that the trail remains easy to scan. |
How do I make Bootstrap breadcrumbs accessible?
Give the navigation landmark a meaningful label, such as aria-label="breadcrumb", and mark the current item with aria-current="page". Bootstrap’s component guidance says to use both so assistive technology can identify the kind of navigation and the current page. The list structure also communicates the items as a related sequence.
“Since breadcrumbs provide a navigation, it’s a good idea to add a meaningful label such as
aria-label="breadcrumb"to describe the type of navigation provided in the<nav>element, as well as applying anaria-current="page"to the last item of the set to indicate that it represents the current page.” — Bootstrap v5.3 documentationSpecial offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Keep the navigation and list semantics when styling the component. Bootstrap’s classes provide presentation, not an automatic accessibility guarantee: the result still depends on the markup, styling, and scripting used by the site. Bootstrap’s broader accessibility guidance discusses that author responsibility.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Which Bootstrap version do these instructions cover?
The examples and customization options here follow Bootstrap v5.3 documentation, checked October 8, 2026. Bootstrap’s migration notes explain that v5 simplified breadcrumb styling by removing padding, background color, and border radius, and introduced the divider custom property. If you are maintaining a v4 project, check its version-specific documentation rather than assuming v5.3 Sass instructions apply unchanged. Read the Bootstrap v5 migration notes for the styling context.
Quick Recap
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.
