Bootstrap breadcrumbs need only a navigation landmark, a list of page ancestors, and a final item marked as the current page. Bootstrap 5.3.8 supplies the styling and separator; you can keep the default slash or customize it with a CSS variable or Sass.
Build the basic Bootstrap breadcrumb
Breadcrumbs show where the current page sits in a site hierarchy. Use links for pages a visitor can navigate back to, then make the current page the final item. Bootstrap’s component documentation supports either an ordered or unordered list; an ordered list makes the hierarchy explicit.
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>Replace the example URLs and labels with the real path through your site. The final item is not a link: aria-current="page" identifies it as the current location, and active applies Bootstrap’s current-item styling. Bootstrap’s documentation recommends a meaningful label on the <nav> landmark and aria-current="page" on the final item. Bootstrap breadcrumb documentation
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsChange or remove the separator
Bootstrap draws breadcrumb separators with CSS, so they do not need to be added as list items or typed between labels. The default separator is a slash. For a one-off change, set --bs-breadcrumb-divider on the navigation element:
#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>The local override limits the change to that breadcrumb. For a site-wide Sass customization, set $breadcrumb-divider before compiling Bootstrap:
$breadcrumb-divider: quote(">");Bootstrap documents both approaches, as well as custom SVG separators and a Sass variable for the flipped divider used in right-to-left layouts. CSS custom properties for breadcrumbs are available from Bootstrap v5.2.0; Sass customization is another option. If using an SVG data URL in the CSS variable, encode or escape reserved characters such as <, >, and # as Bootstrap’s documentation advises. Bootstrap divider customization guidance
Make the breadcrumb usable with assistive technology
- Give the navigation landmark a descriptive label, such as
aria-label="breadcrumb". If a page has multiple navigation landmarks, choose labels that distinguish their purposes. - Mark only the final, current-page item with
aria-current="page". - Keep separators visual rather than inserting slash or chevron characters into the text between links. CSS-generated separators avoid redundant announcements by screen readers.
- Use clear link names and real ancestor destinations so the trail works as navigation rather than decoration.
The W3C ARIA Authoring Practices Guide illustrates an ordered-list breadcrumb and explains the visual-only separator approach. Its example is illustrative, not production-ready code; W3C advises testing implementations with assistive technologies before using them in production. W3C ARIA breadcrumb example
Check styling and contrast in context
Bootstrap’s component styles do not guarantee that a breadcrumb is accessible in every page. Its accessibility guidance says outcomes depend on the author’s markup, additional styling, and scripting, and warns that some default color combinations may not provide sufficient contrast. Check the rendered links, current-page text, and separators against their actual backgrounds, including hover and focus states, in the site’s own layout. Bootstrap accessibility guidance
Rank #3
Version and license
Bootstrap’s official release footer identifies the current release as v5.3.8, while the breadcrumb component documentation is in the v5.3 documentation. Bootstrap code is licensed under MIT, and its documentation is licensed under CC BY 3.0, as stated on the component page.
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.
