Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsBootstrap breadcrumbs share one semantic foundation: a labeled navigation landmark, a list of hierarchy items, links to parent locations, and a final item identifying the current page. The 30 free examples below are adaptable visual treatments—not 30 separate components included with Bootstrap. Each keeps the same core markup while varying the separator, spacing, surface, or emphasis.
Start with accessible Bootstrap breadcrumb markup
Use a <nav> landmark with a meaningful label, a list carrying breadcrumb, and breadcrumb-item on each list item. Link items that navigate to a higher location. Mark the final, non-linked item as active and identify it with aria-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>Replace these destinations and labels with real locations in your site. A placeholder such as href="#" is not a useful production link. Bootstrap documents both ordered and unordered lists; the ordered-list example makes hierarchy explicit.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Bootstrap’s accessibility guidance stresses that the accessible result depends on implementation choices, not merely using a component class. Check that labels make sense out of context, links reach the expected parent pages, text and separators remain legible against their surfaces, and the current page is conveyed without relying on color alone. See Bootstrap 5.1 Breadcrumbs and its accessibility overview.
#1 Best Overall
30 free Bootstrap breadcrumb examples
These examples keep Bootstrap’s breadcrumb structure and use small CSS additions for visual distinctions. Add the shared markup from the starter example around each list; change the list class and CSS as shown. Examples 1–8 use the standard slash separator. Examples 9–16 use a text separator. Examples 17–20 use no separator. Examples 21–30 use an SVG chevron. The separator rules target Bootstrap 5.1 and later; version notes follow the collection.
Plain and compact
| # | Treatment | List class or markup change | CSS |
|---|---|---|---|
| 1 | Default slash | breadcrumb |
Use Bootstrap defaults. |
| 2 | Compact spacing | breadcrumb crumb-compact |
.crumb-compact { --bs-breadcrumb-item-padding-x: .35rem; margin-bottom: .5rem; } |
| 3 | Roomier spacing | breadcrumb crumb-roomy |
.crumb-roomy { --bs-breadcrumb-item-padding-x: 1rem; } |
| 4 | Small text | breadcrumb crumb-small |
.crumb-small { font-size: .875rem; } |
| 5 | Large text | breadcrumb crumb-large |
.crumb-large { font-size: 1.125rem; } |
| 6 | Bold current page | breadcrumb crumb-current-bold |
.crumb-current-bold .active { font-weight: 700; } |
| 7 | Uppercase current page | breadcrumb crumb-current-upper |
.crumb-current-upper .active { text-transform: uppercase; letter-spacing: .04em; } |
| 8 | Subtle parent links | breadcrumb crumb-muted |
.crumb-muted a { color: #59636e; } |
Text separators
| # | Treatment | List class or markup change | CSS |
|---|---|---|---|
| 9 | Greater-than sign | breadcrumb crumb-greater |
.crumb-greater { --bs-breadcrumb-divider: ">' 0a0"; } |
| 10 | Right-pointing angle | breadcrumb crumb-angle |
.crumb-angle { --bs-breadcrumb-divider: ">'203a 0a0"; } |
| 11 | Middle dot | breadcrumb crumb-dot |
.crumb-dot { --bs-breadcrumb-divider: '" 0b7"'; } |
| 12 | Vertical bar | breadcrumb crumb-bar |
.crumb-bar { --bs-breadcrumb-divider: '"|"'; } |
| 13 | Long dash | breadcrumb crumb-dash |
.crumb-dash { --bs-breadcrumb-divider: '"—"'; } |
| 14 | Bullet | breadcrumb crumb-bullet |
.crumb-bullet { --bs-breadcrumb-divider: '"•"'; } |
| 15 | Colon | breadcrumb crumb-colon |
.crumb-colon { --bs-breadcrumb-divider: '":"'; } |
| 16 | Thin-space slash | breadcrumb crumb-thin-slash |
.crumb-thin-slash { --bs-breadcrumb-divider: '"/2009"'; } |
Minimal and surface treatments
| # | Treatment | List class or markup change | CSS |
|---|---|---|---|
| 17 | No separator | breadcrumb crumb-no-divider |
.crumb-no-divider { --bs-breadcrumb-divider: ''; } |
| 18 | Stacked separators removed | breadcrumb crumb-no-divider |
Use the rule from example 17; leave the list items in their normal inline flow. |
| 19 | Quiet, no-separator row | breadcrumb crumb-quiet crumb-no-divider |
.crumb-quiet { font-size: .875rem; } plus example 17’s divider rule. |
| 20 | Dark surface | breadcrumb crumb-dark |
.crumb-dark { --bs-breadcrumb-divider-color: #adb5bd; background: #212529; padding: .75rem 1rem; border-radius: .375rem; } .crumb-dark a { color: #dee2e6; } .crumb-dark .active { color: #fff; } |
| 21 | Light panel | breadcrumb crumb-panel |
.crumb-panel { background: #f8f9fa; padding: .75rem 1rem; border-radius: .375rem; } |
| 22 | Bottom border | breadcrumb crumb-border |
.crumb-border { border-bottom: 1px solid #dee2e6; padding-bottom: .5rem; } |
| 23 | Top and bottom rules | breadcrumb crumb-rules |
.crumb-rules { border-block: 1px solid #dee2e6; padding-block: .5rem; } |
| 24 | Pill-like container | breadcrumb crumb-pill |
.crumb-pill { display: inline-flex; background: #f1f3f5; border-radius: 999px; padding: .5rem 1rem; } |
| 25 | Soft blue panel | breadcrumb crumb-blue |
.crumb-blue { background: #e7f1ff; padding: .75rem 1rem; border-radius: .375rem; } |
| 26 | Raised panel | breadcrumb crumb-raised |
.crumb-raised { padding: .75rem 1rem; background: #fff; box-shadow: 0 .125rem .5rem rgba(0,0,0,.12); border-radius: .375rem; } |
| 27 | SVG chevron | breadcrumb crumb-chevron |
Use the SVG divider rule below. |
| 28 | Smaller SVG chevron | breadcrumb crumb-chevron crumb-chevron-small |
Use the SVG divider rule below with .crumb-chevron-small { --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='8' viewBox='0 0 5 8'%3E%3Cpath fill='none' stroke='%236c757d' d='m1 1 3 3-3 3'/%3E%3C/svg%3E"); } |
| 29 | RTL-aware chevron | breadcrumb crumb-chevron-rtl |
Use the SVG divider rule below; for RTL, replace it with a left-pointing SVG or mirror the icon for the direction. |
| 30 | Chevron with bold current page | breadcrumb crumb-chevron crumb-current-bold |
Use the SVG divider rule below and example 6’s current-page rule. |
For examples 27, 29, and 30, this is the shared SVG divider rule. It URL-escapes characters in the SVG data URI for use in a CSS custom property:
.crumb-chevron {
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='none' stroke='%236c757d' d='m2 1 3 3-3 3'/%3E%3C/svg%3E");
}Example 18 intentionally shows the same separator removal as example 17 in a minimal context rather than claiming a different Bootstrap component. If you want every example to be a distinct visual design, substitute a distinct choice such as a second panel color or a border variation; the semantic markup stays the same.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11How to change the Bootstrap breadcrumb separator
For Bootstrap 5.1, set --bs-breadcrumb-divider on the breadcrumb list, as the examples above do, or customize Bootstrap’s $breadcrumb-divider Sass variable when building the stylesheet. A text separator needs a quoted CSS value; the exact quoting and escaping matter because the custom property supplies a CSS content value. Bootstrap documents text, SVG, and no-divider approaches in its 5.1 breadcrumb documentation.
Rank #3
Bootstrap 5.2 introduced local CSS variables on .breadcrumb. Its documentation also cautions that SVG data-URI characters such as <, >, and # must be URL-escaped when used in a custom property. See Bootstrap 5.2 Breadcrumbs. Bootstrap 4’s documented customization route uses Sass; do not assume the Bootstrap 5 custom-property examples apply unchanged. See Bootstrap 4.0 Breadcrumbs.
Choose and validate a treatment
- Use the default slash for familiar, information-dense navigation; compact spacing can help when the hierarchy is long.
- Choose a text or SVG separator to match the visual language of the site, while keeping it visually distinct from the labels.
- Use a colored or dark surface only after checking link, active-item, and separator contrast against that exact background.
- For right-to-left layouts, verify the hierarchy order and separator direction in the rendered page rather than relying on an LTR icon.
- Test a long hierarchy at narrow widths. Breadcrumbs can wrap, but line breaks should not make the parent-child relationships confusing.
- Keep meaningful parent links and a readable current-page name; avoid turning the final item into a dead link.
MDBootstrap also has a related free breadcrumb examples and tutorial for additional design reference.
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.
