Bootstrap 5 Breadcrumb
A breadcrumb is a secondary navigation aid that shows the user's current page location within the site hierarchy. Bootstrap 5 includes a breadcrumb component with configurable separators. Breadcrumbs are important for both UX (helps users navigate back) and SEO (signals page hierarchy to search engines).
Bootstrap class
.breadcrumbCommon use cases
- Deep page navigation hierarchy
- E-commerce category trail
- Blog post location indicator
- Documentation section path
- SEO-enhanced page hierarchy signalling
Variants and classes
| Variant | Description and classes |
|---|---|
| Default breadcrumb | Slash-separated navigation trail.breadcrumb + breadcrumb-item + active (last item) |
| Custom separator | Arrow, chevron, or any character as separator.breadcrumb + style="--bs-breadcrumb-divider: '>';" |
| Icon breadcrumb | Home icon for the root item.breadcrumb-item + bi bi-house |
Code example
<!-- Breadcrumb with BreadcrumbList schema -->
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="/">Home</a></li>
<li class="breadcrumb-item"><a href="/glossary">Glossary</a></li>
<li class="breadcrumb-item active" aria-current="page">Bootstrap 5</li>
</ol>
</nav>
<!-- JSON-LD BreadcrumbList schema (place in head or page) -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{"@type": "ListItem", "position": 1, "name": "Home", "item": "https://canvasbuilder.co"},
{"@type": "ListItem", "position": 2, "name": "Glossary", "item": "https://canvasbuilder.co/glossary"},
{"@type": "ListItem", "position": 3, "name": "Bootstrap 5", "item": "https://canvasbuilder.co/glossary/bootstrap-5"}
]
}
</script>Live examples
Standard Breadcrumb
Navigation breadcrumb with home, category, and current page.
Canvas template variants
Canvas Builder builds pages on the Canvas HTML template, which adds its own styled versions of Bootstrap 5 components. Variants you can ask for in a prompt:
- Breadcrumb with home icon
- Dark breadcrumb for dark header sections
- Compact breadcrumb for dense navigation
- Breadcrumb with truncation for long paths
Best practices
Always pair breadcrumbs with BreadcrumbList JSON-LD
Bootstrap's breadcrumb component is visual only. Add corresponding BreadcrumbList JSON-LD schema in the page head to signal the hierarchy to Google. This can enable breadcrumb display in search results, improving CTR.
Use aria-current='page' on the last breadcrumb item
The last breadcrumb item (current page) should have aria-current='page'. Bootstrap's active class handles visual styling; the ARIA attribute handles screen reader semantics.