The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →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 are free to use as part of the framework and show a visitor where the current page sits in a site hierarchy. The component needs only a labeled navigation landmark, a breadcrumb list, links for earlier locations, and a current-page item. Bootstrap supplies the separators with CSS, so you can change them without adding separator characters to the HTML.
Copyable Bootstrap breadcrumb markup
This example follows the structure in the Bootstrap v5.2 Breadcrumb documentation. Replace the sample destinations and labels with real pages from your site.
<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><nav>identifies the breadcrumb as navigation. Itsaria-labelgives the landmark a meaningful name..breadcrumbstyles the ordered list;.breadcrumb-itemstyles each item.- Earlier items link to their corresponding pages. The final item identifies the current page with
aria-current="page". - Use actual URLs in production rather than placeholder links. The breadcrumb communicates a location in the site hierarchy; it is not merely decorative text.
Change the divider with a CSS custom property
Bootstrap v5.2 documents --bs-breadcrumb-divider for changing the separator on a particular breadcrumb without recompiling Sass. For example, set it on the navigation element to use 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>The documentation also shows slash separators, an embedded SVG divider, and removing the divider. An SVG used as a CSS custom-property value must be URL-encoded so characters in the data URI are handled correctly. A simple text character is the easier choice when you do not need a custom graphic.
#1 Best Overall
Choose between CSS custom properties and Sass
Use the CSS custom property when you want to adjust an instance in existing compiled CSS or set its value at runtime. Use Sass variables when your project configures Bootstrap source styles and you want the divider to be a build-time default. Bootstrap v5.2 says to wrap a string divider in its quote() function when setting it through Sass. Its guidance is version-specific; Bootstrap’s v5.0 Sass documentation describes placing overrides after imported functions and before the remaining imports.
| Approach | When it takes effect | Typical scope |
|---|---|---|
| CSS custom property | After Bootstrap CSS has been compiled; it can be adjusted without recompiling. | A local value can target one breadcrumb instance. |
| Sass variable | When Bootstrap Sass is configured and compiled. | Establishes a build-time default. |
These distinctions are documented in the v5.2 breadcrumb reference, the v5.3 CSS variables overview, and the v5.0 Sass documentation. Check the version used by your project before copying variable names or Sass examples; the references cover different Bootstrap releases.
Adjust other breadcrumb styles
The Bootstrap v5.2 breadcrumb component documents CSS custom properties for settings such as padding, margin, font size, background, border radius, divider color, item padding, and the active item’s color. These provide additional ways to tune the component. Bootstrap v5.3 explains that compiled CSS custom properties can be customized in real time without recompiling Sass; do not assume every property is identical across versions.
Free tools Windows power users keep installed
One-click scans. No signup required.
Accessibility and search expectations
A labeled navigation landmark and aria-current="page" help communicate the breadcrumb’s purpose and current location. They do not, by themselves, guarantee that a site is accessible. Bootstrap’s broader accessibility guidance notes that accessibility depends substantially on the author’s markup, styling, and scripting. Likewise, breadcrumb markup alone does not establish a search-ranking benefit.
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.
