The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Bootstrap breadcrumb examples share the same foundation: a labeled navigation landmark, a list of hierarchy links, and a final item marked as the current page. Below are 30 free patterns to adapt, from plain Bootstrap defaults to custom separators, compact layouts, color treatments, and responsive designs. They are examples to build from—not 30 separate components included with Bootstrap.
Start with the semantic Bootstrap breadcrumb pattern
Bootstrap breadcrumbs show a page’s place in a site hierarchy. The list can be ordered or unordered; this baseline uses an ordered list. Replace every sample destination with a real URL and make the final item the current page, not a link.
<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>Bootstrap’s v5.1 breadcrumb documentation shows this navigation-and-list pattern, recommends a meaningful landmark label such as aria-label="breadcrumb", and marks the current item with aria-current="page".
Recommended Free Tools
30 free Bootstrap breadcrumb examples
These patterns use Bootstrap’s documented structure and separator customization hooks, with small CSS variations for appearance. The examples assume Bootstrap 5 unless a version is named. Add the CSS shown for a variant after Bootstrap’s stylesheet. Keep contrast, wrapping, and focus styles suitable for the surrounding interface.
#1 Best Overall
| # | Style | What changes | Example CSS |
|---|---|---|---|
| 1 | Default slash | Bootstrap’s standard breadcrumb styling and divider. | None |
| 2 | Text chevron | Uses a greater-than sign as the divider. | .crumb-chevron { --bs-breadcrumb-divider: '>'; } |
| 3 | Double-angle divider | Uses a double-angle text separator. | .crumb-angle { --bs-breadcrumb-divider: '»'; } |
| 4 | Dot divider | Uses a centered dot for a lighter visual break. | .crumb-dot { --bs-breadcrumb-divider: '·'; } |
| 5 | Arrow divider | Uses a right arrow between hierarchy levels. | .crumb-arrow { --bs-breadcrumb-divider: '→'; } |
| 6 | Custom SVG chevron | Uses an SVG image as the divider; see the version notes below for escaping requirements. | .crumb-svg { --bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='m2 1 3 3-3 3' fill='none' stroke='%236c757d'/%3E%3C/svg%3E"); } |
| 7 | No divider | Removes the separator while retaining list semantics. | .crumb-plain { --bs-breadcrumb-divider: ''; } |
| 8 | Muted neutral | Uses a subdued surface and text treatment. | .crumb-muted { background: #f8f9fa; padding: .5rem .75rem; } |
| 9 | Light panel | Adds a light background and rounded edges. | .crumb-panel { background: #f1f3f5; border-radius: .375rem; padding: .75rem 1rem; } |
| 10 | Dark surface | Applies a dark surface with light link and current-page colors. | .crumb-dark { background: #212529; padding: .75rem 1rem; } .crumb-dark a, .crumb-dark .active { color: #f8f9fa; } |
| 11 | Brand color | Applies a brand-colored surface; select text and divider colors with adequate contrast. | .crumb-brand { background: #0d6efd; padding: .75rem 1rem; } .crumb-brand a, .crumb-brand .active { color: #fff; } |
| 12 | Bottom-border trail | Separates the breadcrumb from content with a border. | .crumb-border { border-bottom: 1px solid #dee2e6; padding-bottom: .5rem; } |
| 13 | Compact spacing | Reduces vertical padding for dense layouts. | .crumb-compact { margin-bottom: .5rem; } |
| 14 | Small text | Uses a smaller type size when the breadcrumb remains readable. | .crumb-small { font-size: .875rem; } |
| 15 | Roomy trail | Increases spacing around the trail. | .crumb-roomy { padding: 1rem 0; } |
| 16 | Bold current page | Gives the current location greater weight. | .crumb-current-bold .active { font-weight: 700; } |
| 17 | Uppercase current page | Changes only the current label’s letter case visually. | .crumb-current-upper .active { text-transform: uppercase; letter-spacing: .04em; } |
| 18 | Underlined links | Keeps hierarchy links visibly identifiable without relying on color alone. | .crumb-underlined a { text-decoration: underline; } |
| 19 | Unadorned links | Removes the default underline; ensure another cue makes links recognizable. | .crumb-clean a { text-decoration: none; } .crumb-clean a:hover { text-decoration: underline; } |
| 20 | Pill trail | Places a rounded surface behind the full breadcrumb. | .crumb-pill { display: inline-flex; background: #f1f3f5; border-radius: 999px; padding: .5rem 1rem; } |
| 21 | Outlined trail | Frames the breadcrumb with a subtle outline. | .crumb-outline { border: 1px solid #dee2e6; border-radius: .375rem; padding: .5rem .75rem; } |
| 22 | Icon in a link | Adds a decorative home icon before the first link label; hide decorative icons from assistive technology. | .crumb-home-icon svg { width: 1em; height: 1em; margin-right: .25rem; } |
| 23 | Icon-only first link | Uses a home icon for the root link; provide an accessible name such as aria-label="Home" on the link. |
.crumb-home-only svg { width: 1em; height: 1em; } |
| 24 | Colored divider | Colors the CSS-generated separator independently of link text. | .crumb-colored-divider { --bs-breadcrumb-divider-color: #6c757d; } |
| 25 | RTL-aware trail | Uses a direction-aware separator choice for right-to-left interfaces; verify its appearance in the target language and browser. | [dir="rtl"] .crumb-rtl { --bs-breadcrumb-divider: '←'; } |
| 26 | Wrapped trail | Allows long trails to wrap instead of overflowing narrow containers. | .crumb-wrap { flex-wrap: wrap; } |
| 27 | Single-line scrolling | Preserves a single line in constrained layouts and makes overflow scrollable. | .crumb-scroll { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } |
| 28 | Responsive text size | Uses smaller text on narrow screens and the base size at wider viewports. | .crumb-responsive { font-size: .875rem; } @media (min-width: 768px) { .crumb-responsive { font-size: 1rem; } } |
| 29 | Emphasized hierarchy links | Uses stronger link weight while leaving the current item distinct. | .crumb-links-strong a { font-weight: 600; } |
| 30 | Minimal current-page trail | De-emphasizes the divider and emphasizes the final location. | .crumb-minimal { --bs-breadcrumb-divider-color: #adb5bd; } .crumb-minimal .active { color: #212529; font-weight: 600; } |
To apply a class, add it to the list, for example <ol class="breadcrumb crumb-dot">. The examples change presentation; they do not change the navigation semantics or make sample links valid destinations.
How to change the Bootstrap breadcrumb separator
Bootstrap 5.1 documents divider customization through the --bs-breadcrumb-divider CSS custom property or the Sass $breadcrumb-divider variable. Apply the property to a breadcrumb-specific class so the change stays scoped:
.crumb-chevron {
--bs-breadcrumb-divider: '>';
}For a string divider in Sass, use a quoted value. Bootstrap’s v5.1 documentation also demonstrates an SVG data URI and suppressing the divider. In Bootstrap 5.2, local CSS variables on .breadcrumb are available from v5.2.0; characters such as <, >, and # in an SVG data URI must be URL-escaped. See the Bootstrap v5.2 breadcrumb documentation.
Bootstrap 4 compatibility
The Bootstrap 4.0 documentation uses the same general navigation-and-list structure and CSS-generated separators, but describes divider customization through the Sass $breadcrumb-divider variable. Do not assume the Bootstrap 5 CSS custom-property examples above apply to a Bootstrap 4 project. Check the Bootstrap 4.0 breadcrumb documentation and use its version-specific instructions.
Make breadcrumbs accessible and useful
- Give the navigation landmark a descriptive label, such as
aria-label="breadcrumb". - Use links for earlier locations only when they lead to those locations; use the current page as the final item and mark it with
aria-current="page". - Use real URLs rather than
#for production destinations. - Keep the current page’s text visible and understandable. An icon alone should not replace a useful label unless the link has an accessible name.
- Check link focus visibility, text and divider contrast, zoom behavior, and long-label behavior in the actual layout. Bootstrap’s accessibility overview notes that accessibility depends substantially on implementation choices; a component example by itself does not ensure an accessible result.
More free breadcrumb design references
For additional visual treatments and tutorial material, see MDBootstrap’s breadcrumb examples. Treat third-party examples as design references and confirm that their markup and styles fit your Bootstrap version and accessibility needs.
Quick Recap
Rank #4
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.
