Bootstrap 5 Breadcrumb Styles (6 Designs)
Six breadcrumb trails in one design language: classic chevron, pills, arrow steps, a collapsed path with a dropdown, a numbered checkout progress and an icon bar. Each marks the current page and wraps cleanly on small screens.
<section class="bc-section wdw-stage">
<div class="container bc-wrap">
<div class="mb-4">
<span class="wdw-eyebrow">Navigation</span>
<h2 class="h3 wdw-heading mb-1">Breadcrumb styles</h2>
<p class="text-body-secondary mb-0">Six navigation trails, from quiet to bold.</p>
</div>
<div class="row g-3">
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">01</span>Classic</div>
<nav aria-label="Breadcrumb" class="bc-nav">
<ol class="breadcrumb mb-0 bc-classic"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Gallery</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item"><a href="#">Web</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>
</div>
</div>
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">02</span>Pills</div>
<nav aria-label="Breadcrumb pills" class="bc-nav">
<ol class="breadcrumb mb-0 bc-pills"><li class="breadcrumb-item"><a href="#">Home</a></li><li class="breadcrumb-item"><a href="#">Gallery</a></li><li class="breadcrumb-item"><a href="#">Library</a></li><li class="breadcrumb-item"><a href="#">Web</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>
</div>
</div>
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">03</span>Arrow steps</div>
<nav aria-label="Breadcrumb arrow steps" class="bc-nav">
<ol class="bc-arrows list-unstyled d-flex mb-0"><li><a href="#">Home</a></li><li><a href="#">Gallery</a></li><li><a href="#">Library</a></li><li aria-current="page"><span>Data</span></li></ol>
</nav>
</div>
</div>
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">04</span>Collapsed path</div>
<nav aria-label="Breadcrumb collapsed" class="bc-nav bc-nav-open">
<ol class="breadcrumb mb-0 bc-slash"><li class="breadcrumb-item"><a href="#"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="me-1"><path d="M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg>Home</a></li><li class="breadcrumb-item"><div class="dropdown"><button class="bc-more" type="button" data-bs-toggle="dropdown" aria-expanded="false" aria-label="Show hidden levels">…</button><ul class="dropdown-menu"><li><a class="dropdown-item" href="#">Gallery</a></li><li><a class="dropdown-item" href="#">Library</a></li><li><a class="dropdown-item" href="#">Web</a></li></ul></div></li><li class="breadcrumb-item"><a href="#">Reports</a></li><li class="breadcrumb-item active" aria-current="page">Data</li></ol>
</nav>
</div>
</div>
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">05</span>Numbered progress</div>
<nav aria-label="Breadcrumb progress" class="bc-nav">
<ol class="bc-steps list-unstyled mb-0"><li class="bc-step is-done"><a href="#"><span class="bc-dot">✓</span><span class="bc-txt">Cart</span></a></li><li class="bc-step is-done"><a href="#"><span class="bc-dot">✓</span><span class="bc-txt">Shipping</span></a></li><li class="bc-step is-current" aria-current="step"><span class="bc-dot">3</span><span class="bc-txt">Payment</span></li><li class="bc-step"><span class="bc-dot">4</span><span class="bc-txt">Review</span></li></ol>
</nav>
</div>
</div>
<div class="col-md-6">
<div class="bc-row h-100 p-4 wdw-card-sm">
<div class="bc-label small fw-semibold text-body-secondary mb-3"><span class="bc-num">06</span>Icon bar</div>
<nav aria-label="Breadcrumb icons" class="bc-nav">
<ol class="breadcrumb mb-0 bc-icons"><li class="breadcrumb-item"><a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 11l9-8 9 8v9a1 1 0 0 1-1 1h-5v-6h-6v6H4a1 1 0 0 1-1-1z"/></svg><span>Home</span></a></li><li class="breadcrumb-item"><a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>Gallery</span></a></li><li class="breadcrumb-item"><a href="#"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="3"/><circle cx="9" cy="10" r="1.6"/><path d="m21 16-5-5-8 8"/></svg><span>Library</span></a></li><li class="breadcrumb-item active" aria-current="page"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z"/><path d="M14 3v5h5"/></svg><span>Data</span></li></ol>
</nav>
</div>
</div>
</div>
</div>
</section>
/* Web Designer Wall library style — shared base for every Bootstrap 5 snippet.
Indigo accent, Plus Jakarta Sans, soft cards, pill buttons. Works in light and dark. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");
:root,
[data-bs-theme="light"] {
--wdw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--bs-body-font-family: var(--wdw-font);
--bs-primary: #4f46e5;
--bs-primary-rgb: 79, 70, 229;
--bs-primary-text-emphasis: #3730a3;
--bs-primary-bg-subtle: #eef2ff;
--bs-primary-border-subtle: #c7d2fe;
--bs-link-color: #4f46e5;
--bs-link-color-rgb: 79, 70, 229;
--bs-link-hover-color: #4338ca;
--bs-link-hover-color-rgb: 67, 56, 202;
--bs-focus-ring-color: rgba(79, 70, 229, 0.25);
--bs-border-radius: 0.75rem;
--bs-border-radius-lg: 1rem;
--bs-border-radius-xl: 1.25rem;
--wdw-radius-card: 1.25rem;
--wdw-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 16px 40px -16px rgba(16, 24, 40, 0.22);
--wdw-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px -4px rgba(16, 24, 40, 0.12);
--wdw-stage: #f5f6fb;
}
[data-bs-theme="dark"] {
--bs-primary: #818cf8;
--bs-primary-rgb: 129, 140, 248;
--bs-primary-text-emphasis: #c7d2fe;
--bs-primary-bg-subtle: rgba(129, 140, 248, 0.14);
--bs-primary-border-subtle: rgba(129, 140, 248, 0.35);
--bs-link-color: #a5b4fc;
--bs-link-color-rgb: 165, 180, 252;
--bs-link-hover-color: #c7d2fe;
--bs-link-hover-color-rgb: 199, 210, 254;
--bs-focus-ring-color: rgba(129, 140, 248, 0.35);
--wdw-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 16px 40px -16px rgba(0, 0, 0, 0.7);
--wdw-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -4px rgba(0, 0, 0, 0.5);
--wdw-stage: #0f1117;
}
body { font-family: var(--wdw-font); -webkit-font-smoothing: antialiased; }
/* Bootstrap compiles its blue into these components; point them at the accent. */
.btn-primary {
--bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: #4338ca; --bs-btn-hover-border-color: #4338ca;
--bs-btn-active-bg: #3730a3; --bs-btn-active-border-color: #3730a3;
--bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1117; --bs-btn-hover-bg: #a5b4fc; --bs-btn-hover-border-color: #a5b4fc; --bs-btn-hover-color: #0f1117; --bs-btn-active-color: #0f1117; }
.btn-outline-primary {
--bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary);
--bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary);
--bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary);
--bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}
.btn { --bs-btn-font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.btn-sm { min-height: 36px; }
.form-control, .form-select { min-height: 44px; border-radius: .75rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); }
.nav-pills { --bs-nav-pills-link-active-bg: var(--bs-primary); }
.nav { --bs-nav-link-color: var(--bs-secondary-color); --bs-nav-link-hover-color: var(--bs-emphasis-color); }
.pagination { --bs-pagination-active-bg: var(--bs-primary); --bs-pagination-active-border-color: var(--bs-primary); --bs-pagination-color: var(--bs-body-color); --bs-pagination-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.progress, .progress-stacked { --bs-progress-bar-bg: var(--bs-primary); }
.list-group { --bs-list-group-active-bg: var(--bs-primary); --bs-list-group-active-border-color: var(--bs-primary); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary); border-radius: .875rem; box-shadow: var(--wdw-shadow-sm); }
.accordion { --bs-accordion-active-bg: var(--bs-primary-bg-subtle); --bs-accordion-active-color: var(--bs-primary-text-emphasis); --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.badge { font-weight: 600; }
/* Library building blocks — use these instead of re-inventing them per snippet. */
.wdw-stage { min-height: 100vh; display: flex; align-items: center; background: var(--wdw-stage); padding-block: 3rem; }
.wdw-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: var(--wdw-radius-card); box-shadow: var(--wdw-shadow); }
.wdw-card-sm { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; box-shadow: var(--wdw-shadow-sm); }
.wdw-aurora { position: relative; color: #fff; background: radial-gradient(60% 55% at 100% 0, #818cf8 0, transparent 70%), radial-gradient(65% 60% at 0 100%, #ec4899 0, transparent 65%), #1e1b4b; }
.wdw-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-primary); }
.wdw-heading { font-weight: 800; letter-spacing: -.02em; color: var(--bs-emphasis-color); }
.wdw-muted { color: var(--bs-secondary-color); }
.wdw-icon { width: 2.75rem; height: 2.75rem; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: .875rem; background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
/* Component */
.bc-wrap{max-width:1000px}
.bc-label{white-space:nowrap}
.bc-num{display:inline-block;min-width:1.75rem;color:var(--bs-primary)}
.bc-nav{min-height:48px;display:flex;align-items:center}
.bc-nav>ol{width:100%}
.bc-label{color:var(--bs-body-color)!important}
.bc-section .breadcrumb{flex-wrap:wrap;row-gap:.4rem}
.bc-row{display:flex;flex-direction:column}
.bc-row .bc-nav{flex:1}
.bc-section .breadcrumb-item+.breadcrumb-item{padding-left:.5rem}
.bc-section .breadcrumb-item+.breadcrumb-item::before{padding-right:.5rem}
.bc-section .breadcrumb a,.bc-arrows a{text-decoration:none;color:var(--bs-secondary-color)}
.bc-section .breadcrumb a:hover,.bc-arrows a:hover{color:var(--bs-primary)}
.bc-section .breadcrumb-item.active{color:var(--bs-emphasis-color);font-weight:600}
/* pills */
.bc-pills{--bs-breadcrumb-divider:"";gap:.4rem}
.bc-pills .breadcrumb-item{padding:0}
.bc-pills .breadcrumb-item+.breadcrumb-item::before{display:none}
.bc-pills .breadcrumb-item a,.bc-pills .breadcrumb-item.active{display:inline-block;padding:.4rem .9rem;border-radius:50rem;background:var(--bs-tertiary-bg);font-size:.875rem}
.bc-pills .breadcrumb-item.active{background:var(--bs-primary);color:#fff}
/* classic */
.bc-classic{--bs-breadcrumb-divider:"\203A"}
.bc-classic .breadcrumb-item+.breadcrumb-item::before{font-size:1.25rem;line-height:1}
/* arrows */
.bc-arrows{gap:6px 2px;flex-wrap:wrap}
.bc-arrows li{margin-left:-6px}
.bc-arrows li:first-child{margin-left:0}
.bc-arrows a,.bc-arrows span{display:block;height:40px;display:flex;align-items:center;padding:0 1.5rem 0 1.75rem;font-size:.9rem;white-space:nowrap;background:var(--bs-tertiary-bg);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}
.bc-arrows li:first-child a{padding-left:1.2rem;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%);border-radius:50rem 0 0 50rem}
.bc-arrows li:last-child span{color:#fff;background:var(--bs-primary);color:#fff;font-weight:600;padding-right:1.4rem}
.bc-arrows li a{background:var(--bs-secondary-bg)}
/* collapsed */
.bc-slash,.bc-thin{--bs-breadcrumb-divider:"/";--bs-breadcrumb-divider-color:var(--bs-tertiary-color)}
.bc-thin .breadcrumb-item a{display:inline-flex;align-items:center}
.bc-thin .breadcrumb-item+.breadcrumb-item::before{font-weight:300}
.bc-slash .breadcrumb-item+.breadcrumb-item::before{font-weight:300}
.bc-slash .breadcrumb-item a{display:inline-flex;align-items:center}
.bc-more{border:0;background:var(--bs-tertiary-bg);color:var(--bs-secondary-color);border-radius:50rem;min-width:44px;min-height:32px;line-height:1;padding:0 .6rem;font-weight:700}
.bc-more:hover{background:var(--bs-secondary-bg);color:var(--bs-emphasis-color)}
.bc-section .dropdown-menu{--bs-dropdown-font-size:.9rem}
/* numbered steps */
.bc-steps{display:flex;width:100%;font-size:.8rem;padding:0}
.bc-steps .bc-step{position:relative;flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:.4rem;text-align:center;color:var(--bs-secondary-color)}
.bc-steps a{display:flex;flex-direction:column;align-items:center;gap:.4rem;text-decoration:none;color:var(--bs-secondary-color)}
.bc-steps .bc-step+.bc-step::before{content:"";position:absolute;top:.8rem;right:50%;width:100%;height:2px;margin-top:-1px;background:var(--bs-border-color);z-index:0}
.bc-steps .bc-step.is-done+.bc-step::before{background:var(--bs-primary)}
.bc-dot{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;flex:none;border-radius:50%;border:2px solid var(--bs-border-color);background:var(--bs-body-bg);font-size:.75rem;font-weight:700}
.bc-step.is-done .bc-dot{background:var(--bs-primary);border-color:var(--bs-primary);color:#fff}
.bc-step.is-current{color:var(--bs-emphasis-color);font-weight:600}
.bc-step.is-current .bc-dot{border-color:var(--bs-primary);color:var(--bs-primary)}
/* icon bar */
.bc-icons{--bs-breadcrumb-divider:"\203A";background:var(--bs-primary-bg-subtle);border-radius:50rem;padding:.55rem 1rem;column-gap:.1rem}
.bc-icons .breadcrumb-item a,.bc-icons .breadcrumb-item.active{display:inline-flex;align-items:center;gap:.4rem}
.bc-icons .breadcrumb-item.active{color:var(--bs-primary-text-emphasis)}
.bc-icons a{color:var(--bs-primary-text-emphasis)!important}
@media (max-width:575.98px){.bc-icons{border-radius:1.25rem}.bc-icons .breadcrumb-item+.breadcrumb-item{padding-left:.3rem}.bc-icons .breadcrumb-item+.breadcrumb-item::before{padding-right:.3rem}}
@media (max-width:575.98px){.bc-arrows a,.bc-arrows span{height:36px;padding:0 .9rem 0 1.2rem;font-size:.8rem}.bc-arrows li:first-child a{padding-left:1rem}}
.bc-nav-open{overflow:visible}.bc-nav-open .breadcrumb-item{display:flex;align-items:center}.bc-nav-open .dropdown{display:flex}
@media (max-width:575.98px){.bc-icons{font-size:.8rem;padding:.55rem .75rem;column-gap:0}.bc-icons .breadcrumb-item a,.bc-icons .breadcrumb-item.active{gap:.25rem}.bc-icons svg{width:14px;height:14px}.bc-icons .breadcrumb-item+.breadcrumb-item{padding-left:.2rem}.bc-icons .breadcrumb-item+.breadcrumb-item::before{padding-right:.2rem}}
Built on Bootstrap 5.3.8 with plain JavaScript — no jQuery. Supports light and dark mode via data-bs-theme.
