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="#">Beauty</a></li>
<li class="breadcrumb-item active" aria-current="page">How to choose the right product</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-4 mb-0">
<li class="breadcrumb-item"><a href="#" class="no-underline">Overview</a></li>
<li class="breadcrumb-item"><a href="#" class="no-underline">Projects</a></li>
<li class="breadcrumb-item active font-semibold" aria-current="page">Practical update</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="no-underline"><i class="bi bi-house-door-fill" aria-hidden="true"></i> Home</a></li>
<li class="breadcrumb-item"><a href="#" class="no-underline"><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> Ivy Fischer</li>
</ol>
</nav>5File path
Folder icons turn the breadcrumb into a file-manager path.
<nav aria-label="Folder path" class="font-mono small">
<ol class="breadcrumb mb-0">
<li class="breadcrumb-item"><a href="#" class="no-underline"><i class="bi bi-hdd-fill" aria-hidden="true"></i> Drive</a></li>
<li class="breadcrumb-item"><a href="#" class="no-underline"><i class="bi bi-folder-fill" aria-hidden="true"></i> Projects</a></li>
<li class="breadcrumb-item"><a href="#" class="no-underline"><i class="bi bi-folder-fill" aria-hidden="true"></i> museeon</a></li>
<li class="breadcrumb-item active" aria-current="page"><i class="bi bi-file-earmark-text-fill" aria-hidden="true"></i> report-2024.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-surface-3 rounded-lg px-4 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.
Face oil
<div class="flex flex-col md:flex-row justify-between md:items-end gap-4 border-b pb-4">
<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">Face oil</h3>
</div>
<div class="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 items-center mb-0">
<li class="breadcrumb-item"><a href="#">Home</a></li>
<li class="breadcrumb-item"><div class="dropdown 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">#ORD-5490 <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 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="#">Outdoor</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 no-underline"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Cart</a></li>
<li class="breadcrumb-item"><a href="#" class="link-success no-underline"><i class="bi bi-check-circle-fill" aria-hidden="true"></i> Shipping</a></li>
<li class="breadcrumb-item active font-semibold text-body" aria-current="step"><i class="bi bi-3-circle-fill" aria-hidden="true"></i> Payment</li>
<li class="breadcrumb-item text-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.
Rain jacket
$125.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="#">Outdoor</a></li>
<li class="breadcrumb-item active" aria-current="page">Rain jacket</li>
</ol>
</nav>
<h4 class="mb-1">Rain jacket</h4>
<div class="text-lg text-primary-ink font-semibold">
$125.00
</div>14In a card header
The breadcrumb lives in the card header and describes the card content.
Order before 2 pm and most items leave our warehouse the same day.
<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="#">2026</a></li>
<li class="breadcrumb-item active" aria-current="page">Q3</li>
</ol>
</nav>
</div>
<div class="card-body">
<p class="card-text mb-0">Order before 2 pm and most items leave our warehouse the same day.</p>
</div>
</div>15Dark bar
Inside data-ui-theme="dark" the breadcrumb colours adapt automatically.
<div data-ui-theme="dark" class="bg-dark rounded-md px-4 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-6</li>
</ol>
</nav>
</div>16With back button
A back arrow next to the trail for mobile-friendly navigation.
<div class="flex items-center gap-4">
<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">Finn Novak</li>
</ol>
</nav>
</div>17Title with meta line
Breadcrumb, a large title and a muted meta line for document pages.
Our favourite tips for busy weeks
Updated Aug 2, 2026 · 3 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">Our favourite tips for busy weeks</h2>
<p class="text-muted small mb-0"><i class="bi bi-clock-fill" aria-hidden="true"></i> Updated Aug 2, 2026 · 3 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">Secure idea</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 truncate" style="max-width: 140px;"><a href="#">A small guide to a calmer home and more</a></li>
<li class="breadcrumb-item active truncate" style="max-width: 160px;" aria-current="page">The small habits that make a big difference 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="flex flex-col sm:flex-row justify-between sm:items-center gap-2 border rounded-md 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>