Breadcrumb
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="#">Savings</a></li>
<li class="breadcrumb-item active" aria-current="page">The small habits that make a big difference</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">Modern process</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> Felix Kowalski</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> tideara</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.
Pro account
<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">Pro account</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">#TX-4030 <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="#">Savings</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.
Team cards
$15.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="#">Cards</a></li>
<li class="breadcrumb-item active" aria-current="page">Team cards</li>
</ol>
</nav>
<h4 class="mb-1">Team cards</h4>
<div class="fs-5 text-primary fw-semibold">
$15.00
</div>14In a card header
The breadcrumb lives in the card header and describes the card content.
Set approval rules for large payments and see who spent what, and why.
<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">Q1</li>
</ol>
</nav>
</div>
<div class="card-body">
<p class="card-text mb-0">Set approval rules for large payments and see who spent what, and why.</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-5</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">Zoe Hughes</li>
</ol>
</nav>
</div>17Title with meta line
Breadcrumb, a large title and a muted meta line for document pages.
Budgeting basics for small teams
Updated Oct 7, 2026 · 7 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">Budgeting basics for small teams</h2>
<p class="text-body-secondary small mb-0"><i class="bi bi-clock-fill" aria-hidden="true"></i> Updated Oct 7, 2026 · 7 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">Honest project</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="#">Running payroll for your first five hires and more</a></li>
<li class="breadcrumb-item active text-truncate" style="max-width: 160px;" aria-current="page">What to look for in a business account 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>