Bootstrap 5 breadcrumbs show the current page location within a navigational hierarchy. This page covers 4 breadcrumb patterns — basic, custom dividers, styled and hero section — each ready to use.
Quick Setup
Breadcrumbs need only Bootstrap 5 CSS:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
Key Classes Reference
| Class | What It Does |
|---|---|
.breadcrumb | The ordered list element |
.breadcrumb-item | Each breadcrumb step |
.breadcrumb-item.active | Current page item |
aria-current="page" | Accessibility for current page |
aria-label="breadcrumb" | Accessibility for nav element |
--bs-breadcrumb-divider | CSS variable for divider character |
1. Basic Bootstrap 5 Breadcrumb
Standard breadcrumb navigation using the breadcrumb and breadcrumb-item classes.
2. Bootstrap 5 Custom Breadcrumb Dividers
Change the default / divider to arrows, dots or custom characters using CSS variable.
3. Bootstrap 5 Styled Breadcrumbs
Breadcrumbs with custom background, padding and colors for a more prominent look.
4. Bootstrap 5 Breadcrumb in Hero Section
Breadcrumb inside a dark hero section. Common on documentation and category pages.
Frequently Asked Questions
Override the CSS variable on the nav element: <nav style='--bs-breadcrumb-divider:"→"'>. Use any text character or SVG. To use an SVG arrow use the built-in Bootstrap example with a data URI. To remove the divider set it to an empty string: --bs-breadcrumb-divider:''.
Add structured data via JSON-LD in a script tag: { '@context': 'https://schema.org', '@type': 'BreadcrumbList', 'itemListElement': [{ '@type': 'ListItem', 'position': 1, 'name': 'Home', 'item': 'https://example.com' }] }. This helps Google show breadcrumbs in search results.
In frameworks like Angular or React, map your route segments to breadcrumb items. In Angular subscribe to router events and build breadcrumb data from the route snapshot. In Next.js use usePathname and split the path by / to generate breadcrumb segments dynamically.
The divider is set via CSS content property. Check that your CSS is loading correctly. If using a bundler, ensure you're not stripping the --bs-breadcrumb-divider variable. The variable must be set on the nav element or a parent, not on the ol.breadcrumb.
Override the active breadcrumb color: .breadcrumb-item.active { color: #your-color; }. The active item has aria-current='page' so you can also target: .breadcrumb-item[aria-current='page'] { color: #your-color; font-weight: 600; }.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.