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).
Primary 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 & Classes
| Variant | Description |
|---|---|
| Default breadcrumb | Slash-separated navigation trail. |
| Custom separator | Arrow, chevron, or any character as separator. |
| Icon breadcrumb | Home icon for the root item. |
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>Canvas Framework Variants
The Canvas template extends Bootstrap 5 with 1,658+ component variants. Generate any of these using Canvas Builder:
- ✓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.