The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Bootstrap’s breadcrumb component is free to use and shows a visitor’s location in a site hierarchy. Add a labeled <nav>, an ordered list with the .breadcrumb class, and list items with .breadcrumb-item. Link earlier locations and mark the current page with aria-current="page". The examples below follow Bootstrap 5.2’s breadcrumb documentation.
Build a basic Bootstrap breadcrumb
Bootstrap adds separators between breadcrumb items with CSS, so you do not need to type slashes into the link text. Use actual destinations for navigable items; the last item identifies the current page.
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 navigation label identifies the landmark for assistive technology, and aria-current="page" identifies the current location. Bootstrap recommends both in its v5.2 breadcrumb guidance. The markup itself does not guarantee that a site is accessible; Bootstrap notes that accessibility also depends on author markup, styling, and scripting.
Change or remove the separator with CSS
For a local change to one breadcrumb, set --bs-breadcrumb-divider on its navigation element. Bootstrap 5.2 documents this component-level custom property as a way to change the divider without recompiling Sass.
#1 Best Overall
<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>Bootstrap’s default divider is a slash. The documentation also demonstrates an embedded SVG divider and a way to remove the divider entirely. An SVG used through a CSS custom property must have its characters URL-escaped. See the Bootstrap 5.2 examples before copying those forms.
Choose CSS custom properties or Sass
| Approach | When it takes effect | Best fit |
|---|---|---|
| CSS custom property | After the compiled CSS is loaded; a local value can adjust an individual breadcrumb. | A one-off or runtime change, such as changing the separator for one navigation trail. |
| Sass variable | When Bootstrap’s Sass is compiled. | A project-wide build-time default when the project already configures Bootstrap source styles. |
Bootstrap 5.2 documents --bs-breadcrumb-divider for CSS customization and $breadcrumb-divider for Sass. In Sass, quote a string divider with Bootstrap’s quote() function. Bootstrap’s v5.0 Sass guidance places overrides after importing functions and before the remaining imports. Confirm your installed Bootstrap version before relying on these version-specific names or import instructions.
Customize the breadcrumb’s appearance
Bootstrap 5.2 exposes breadcrumb CSS custom properties for details including padding, margin, font size, background, border radius, divider color, item padding, and active-item color. Adjust the relevant property in your stylesheet or on a particular breadcrumb rather than replacing the component’s structure. Bootstrap’s v5.3 CSS variables overview explains that compiled custom properties allow real-time customization without recompiling Sass; check the documentation for your version because the available properties can differ.
Keep the component useful and accurate
- Show the page’s place in the site hierarchy, not merely decorative text.
- Use meaningful labels for each destination and real links for earlier locations.
- Keep the current page as the final item and mark it with
aria-current="page". - Use
aria-label="breadcrumb"on the navigation landmark. - Treat “free” as referring to Bootstrap’s documented component; it does not establish that every third-party theme or download advertised as Bootstrap is free.
Breadcrumb markup alone does not establish an SEO benefit. Use it for clear hierarchical navigation, and assess accessibility in the context of the complete page.
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.
