Breadcrumbs show the path to the current page and give one-click access to every parent level. Wrap the list in a nav with aria-label, mark the last item with aria-current, and change the divider with the --ui-breadcrumb-divider variable.
1Basic breadcrumb
Shows where the current page sits in the site hierarchy.
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Strength</a></li>
<li class="breadcrumb-item active" aria-current="page">What our members asked us most</li>
</ol>
</nav>2Custom divider
Change the separator with the --ui-breadcrumb-divider variable.
<nav style="--ui-breadcrumb-divider: '>
';" aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Library</a></li>
<li class="breadcrumb-item active" aria-current="page">Data</li>
</ol>
</nav>
<nav style="--ui-breadcrumb-divider: '\2192';" aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Start</a></li>
<li class="breadcrumb-item"><a href="#">Details</a></li>
<li class="breadcrumb-item active" aria-current="page">Finish</li>
</ol>
</nav>3No divider
An empty divider plus gaps gives a clean, minimal trail.
<nav style="--ui-breadcrumb-divider: '';" aria-label="breadcrumb">
<ol class="breadcrumb gap-3 mb-0">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Overview</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none">Projects</a></li>
<li class="breadcrumb-item active fw-semibold" aria-current="page">Secure routine</li>
</ol>
</nav>4With icons
Icons before each level help people recognise sections quickly.
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none"><i class="bi bi-house-door-fill" aria-hidden="true"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none"><i class="bi bi-people-fill" aria-hidden="true"></i> Customers</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="bi bi-person-fill" aria-hidden="true"></i> Samir Duarte</li>
</ol>
</nav>5File path
Folder icons turn the breadcrumb into a file-manager path.
<nav aria-label="Folder path" class="font-monospace small">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="text-decoration-none"><i class="bi bi-hdd-fill" aria-hidden="true"></i> Drive</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none"><i class="bi bi-folder-fill" aria-hidden="true"></i> Projects</a></li>
<li class="breadcrumb-item"><a href="#" class="text-decoration-none"><i class="bi bi-folder-fill" aria-hidden="true"></i> opal-kit</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i> report-2025.pdf</li>
</ol>
</nav>6On a tinted panel
Padding, a tertiary background and rounded corners frame the trail.
<nav aria-label="breadcrumb">
<ol class="breadcrumb bg-body-tertiary rounded-3 px-3 py-2 mb-0">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item"><a href="#">Settings</a></li>
<li class="breadcrumb-item active" aria-current="page">Billing</li>
</ol>
</nav>7Page header
Breadcrumb above a page title with actions on the right: a standard admin page header.
Coaching plan
<div class="d-flex flex-column flex-md-row justify-content-between align-items-md-end gap-3 border-bottom pb-3">
<div>
<nav aria-label="breadcrumb">
<ol class="breadcrumb small mb-1">
<li class="breadcrumb-item"><a href="#">Catalogue</a></li>
<li class="breadcrumb-item"><a href="#">Products</a></li>
<li class="breadcrumb-item active" aria-current="page">Edit</li>
</ol>
</nav>
<h3 class="mb-0">Coaching plan</h3>
</div>
<div class="d-flex gap-2">
<button type="button" class="btn btn-outline-secondary"><i class="bi bi-eye" aria-hidden="true"></i> Preview</button>
<button type="button" class="btn btn-primary"><i class="bi bi-check-lg" aria-hidden="true"></i> Save</button>
</div>
</div>8Collapsed middle levels
Deep paths hide the middle levels in a dropdown behind an ellipsis.
<nav aria-label="breadcrumb">
<ol class="breadcrumb align-items-center mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><div class="dropdown d-inline-block"><button class="btn btn-sm btn-light py-0 px-2" type="button" id="crumb-more-849" data-ui-toggle="dropdown" aria-expanded="false" aria-label="Show hidden levels"><i class="bi bi-three-dots" aria-hidden="true"></i></button><ul class="dropdown-menu" aria-labelledby="crumb-more-849"><li><a class="dropdown-item" href="#">Workspace</a></li><li><a class="dropdown-item" href="#">Marketing</a></li><li><a class="dropdown-item" href="#">Campaigns</a></li></ul></div></li>
<li class="breadcrumb-item"><a href="#">Spring launch</a></li>
<li class="breadcrumb-item active" aria-current="page">Assets</li>
</ol>
</nav>9Current page with badge
A status badge next to the last item adds context about the page.
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Orders</a></li>
<li class="breadcrumb-item active" aria-current="page">#INV-8768 <span class="badge text-bg-warning ms-1">Processing</span></li>
</ol>
</nav>10Small breadcrumb
Small text for compact headers and cards.
<nav aria-label="breadcrumb">
<ol class="breadcrumb small text-uppercase mb-0" style="letter-spacing: .05em;">
<li class="breadcrumb-item"><a href="#" class="link-secondary">Help</a></li>
<li class="breadcrumb-item"><a href="#" class="link-secondary">Billing</a></li>
<li class="breadcrumb-item active" aria-current="page">Invoices</li>
</ol>
</nav>11Pill breadcrumb
Each level is a rounded pill; the active one uses the primary colour.
<nav aria-label="breadcrumb">
<ol class="breadcrumb ca-crumb-pills mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><a href="#">Blog</a></li>
<li class="breadcrumb-item"><a href="#">Recovery</a></li>
<li class="breadcrumb-item active" aria-current="page">Article</li>
</ol>
</nav>12Checkout progress
Completed steps get a check icon; future steps are muted and not links.
<nav style="--ui-breadcrumb-divider: '\203A';" aria-label="Checkout progress">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="link-success text-decoration-none"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Cart</a></li>
<li class="breadcrumb-item"><a href="#" class="link-success text-decoration-none"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Shipping</a></li>
<li class="breadcrumb-item active fw-semibold text-body" aria-current="step"><i class="bi bi-3-circle-fill" aria-hidden="true"></i> Payment</li>
<li class="breadcrumb-item text-body-tertiary"><i class="bi bi-4-circle-fill" aria-hidden="true"></i> Confirm</li>
</ol>
</nav>13Shop category trail
A store breadcrumb above a product title and price.
Yoga retreat
$425.00
<nav aria-label="breadcrumb">
<ol class="breadcrumb small mb-2">
<li class="breadcrumb-item"><a href="#">Shop</a></li>
<li class="breadcrumb-item"><a href="#">Yoga</a></li>
<li class="breadcrumb-item active" aria-current="page">Yoga retreat</li>
</ol>
</nav>
<h4 class="mb-1">Yoga retreat</h4>
<div class="fs-5 text-primary fw-semibold">
$425.00
</div>14In a card header
The breadcrumb lives in the card header and describes the card content.
Small group classes mean your coach knows your name and your form.
<div class="card">
<div class="card-header bg-transparent">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0 small">
<li class="breadcrumb-item"><a href="#">Reports</a></li>
<li class="breadcrumb-item"><a href="#">2025</a></li>
<li class="breadcrumb-item active" aria-current="page">Q2</li>
</ol>
</nav>
</div>
<div class="card-body">
<p class="card-text mb-0">Small group classes mean your coach knows your name and your form.</p>
</div>
</div>15Dark bar
Inside data-ui-theme="dark" the breadcrumb colours adapt automatically.
<div data-ui-theme="dark" class="bg-dark rounded px-3 py-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Console</a></li>
<li class="breadcrumb-item"><a href="#">Servers</a></li>
<li class="breadcrumb-item active" aria-current="page">web-2</li>
</ol>
</nav>
</div>16With back button
A back arrow next to the trail for mobile-friendly navigation.
<div class="d-flex align-items-center gap-3">
<a href="#" class="btn btn-outline-secondary btn-sm" aria-label="Back"><i class="bi bi-arrow-left" aria-hidden="true"></i></a>
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#">Messages</a></li>
<li class="breadcrumb-item active" aria-current="page">Maya Tanaka</li>
</ol>
</nav>
</div>17Title with meta line
Breadcrumb, a large title and a muted meta line for document pages.
Looking back at a busy season
Updated Oct 15, 2025 · 10 min read
<nav aria-label="breadcrumb">
<ol class="breadcrumb small mb-2">
<li class="breadcrumb-item"><a href="#">Docs</a></li>
<li class="breadcrumb-item"><a href="#">Guides</a></li>
<li class="breadcrumb-item active" aria-current="page">Setup</li>
</ol>
</nav>
<h2 class="h3 mb-1">Looking back at a busy season</h2>
<p class="text-body-secondary small mb-0"><i class="bi bi-clock-fill" aria-hidden="true"></i> Updated Oct 15, 2025 · 10 min read</p>18Dot divider
A middle dot as divider looks lighter than a slash.
<nav style="--ui-breadcrumb-divider: '\00B7';" aria-label="breadcrumb">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="link-body-emphasis">Studio</a></li>
<li class="breadcrumb-item"><a href="#" class="link-body-emphasis">Gallery</a></li>
<li class="breadcrumb-item active" aria-current="page">Fast experience</li>
</ol>
</nav>19Truncated long names
Long levels are cut with an ellipsis so the trail stays on one line on phones.
<nav aria-label="breadcrumb">
<ol class="breadcrumb flex-nowrap mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item text-truncate" style="max-width: 140px;"><a href="#">Why recovery matters as much as training and more</a></li>
<li class="breadcrumb-item active text-truncate" style="max-width: 160px;" aria-current="page">How to stay motivated through winter with a very long name</li>
</ol>
</nav>20Toolbar with search
Breadcrumb on the left and a search box on the right in one toolbar.
<div class="d-flex flex-column flex-sm-row justify-content-between align-items-sm-center gap-2 border rounded p-2">
<nav aria-label="breadcrumb">
<ol class="breadcrumb mb-0 ps-1">
<li class="breadcrumb-item"><a href="#">Files</a></li>
<li class="breadcrumb-item active" aria-current="page">Shared</li>
</ol>
</nav>
<div class="input-group input-group-sm" style="max-width: 240px;">
<span class="input-group-text"><i class="bi bi-search" aria-hidden="true"></i></span><input type="search" class="form-control" id="crumb-search-850" placeholder="Search files" aria-label="Search files">
</div>
</div>