<bmx-breadcrumb>
The trail back out of wherever you are, which shortens itself rather than wrapping or scrolling when there is not room for all of it.
5 properties · 1 events · 1 methods · 5 parts
Example
Drag the handle to narrow the trail, and watch the middle fold away while both ends stay:
The separator is a property, so a house style is one attribute rather than a fork:
Show markup
<div class="row">
<p style="margin: 0">Drag the handle to narrow the trail, and watch the middle fold away while both ends stay:</p>
</div>
<div class="row">
<div id="ex-crumb-frame" style="inline-size: 100%; resize: horizontal; overflow: auto; min-inline-size: 9rem; padding-block-end: 8px">
<bmx-breadcrumb id="ex-crumb" label="You are here">
<bmx-breadcrumb-item href="#/">Home</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="#/reports">Reports</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="#/reports/2026">2026</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="#/reports/2026/q3">Third quarter</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="#/reports/2026/q3/revenue">Revenue</bmx-breadcrumb-item>
<bmx-breadcrumb-item>By region</bmx-breadcrumb-item>
</bmx-breadcrumb>
</div>
</div>
<div class="row">
<span class="note" id="ex-crumb-out">
The first crumb is the way out and the last is where you are, so those two are the last to go. Below about nine
characters of room, only the last survives.
</span>
</div>
<div class="row" style="margin-block-start: 1rem">
<p style="margin: 0">The separator is a property, so a house style is one attribute rather than a fork:</p>
</div>
<div class="row">
<bmx-breadcrumb separator="›" label="Chevrons">
<bmx-breadcrumb-item href="#/">Home</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="#/library">Library</bmx-breadcrumb-item>
<bmx-breadcrumb-item>Components</bmx-breadcrumb-item>
</bmx-breadcrumb>
</div>
<script type="module">
await customElements.whenDefined('bmx-breadcrumb');
const out = document.getElementById('ex-crumb-out');
/*
* One listener, and it hears a crumb chosen from the overflow menu as well as
* one clicked on the trail: choosing in the menu calls the real element's own
* `activate()`, so the click lands on the link that was written rather than on
* a copy of it. Nothing here has to know which route the press took.
*/
for (const crumb of document.querySelectorAll('#ex-crumb bmx-breadcrumb-item')) {
crumb.addEventListener('click', () => {
out.textContent = `went to: ${crumb.textContent.trim()}`;
});
}
</script><bmx-breadcrumb>
<bmx-breadcrumb-item href="/">Home</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="/reports">Reports</bmx-breadcrumb-item>
<bmx-breadcrumb-item href="/reports/2026">2026</bmx-breadcrumb-item>
<bmx-breadcrumb-item>Q3 revenue</bmx-breadcrumb-item>
</bmx-breadcrumb>
WHAT HAPPENS WHEN IT DOES NOT FIT
The middle collapses behind a button, and the first and last crumbs stay. A
trail answers two questions - where am I, and how do I get back out - and
those two crumbs are the answers, so they are the last to go. Collapsing from
the end instead, which is what bmx-toolbar does, would throw away the
answer to the first. In the narrowest case the final crumb survives alone:
you may not be able to see the path, but you can always see where you are.
The arithmetic is src/core/breadcrumb.ts, tested without a browser.
The collapsed crumbs are not copied into the menu. Choosing one calls the
real element's own activate(), so a router that intercepted the click still
intercepts it and there is no second navigation path to keep in step.
THE MARKUP IT DRAWS
A <nav> with an accessible name, a list inside it, and aria-current="page"
on the final crumb - the part of the WAI-ARIA breadcrumb pattern that is
tedious to remember and easy to get subtly wrong. The last crumb is marked
for you unless you have marked one yourself, in which case this component
leaves your choice alone: a trail whose last crumb links somewhere else is a
legitimate thing to write.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
collapse |
collapse |
'auto' | 'never' |
'auto' |
Whether crumbs that do not fit collapse behind a button. |
label |
label |
string |
'Breadcrumb' |
The trail's accessible name. It names the landmark, so it is what a screen-reader user hears when they jump between the navigation regions of a page. "Breadcrumb" is right for the only one on a page and wrong for the second. |
markCurrent |
mark-current |
boolean |
true |
Whether the last crumb is marked as the page you are on. The single most useful thing this component does for a screen reader: without aria-current="page" a trail is a row of links, and the one saying where you are is indistinguishable from the ones saying where you could go. |
menuLabel |
menu-label |
string |
'Show the rest of the path' |
The overflow button's accessible name. |
separator |
separator |
string |
'/' |
What is drawn between two crumbs. Text rather than an image, because a separator is punctuation: it has to match the typeface around it, and a customer whose house style uses > or » or a middle dot has to be able to say so without forking anything. It reaches the crumbs as --bmx-breadcrumb-separator-content, so a stylesheet can change it for one trail without touching the markup. |
Events
| Event | Detail | Description |
|---|---|---|
bmxSelect |
BmxBreadcrumbSelectDetail |
Fired when a crumb is chosen from the overflow menu. |
Methods
| Method | Signature | Description |
|---|---|---|
refresh |
refresh() => Promise<void> |
Re-measure now. Rarely needed: a resize and a change of children are watched. |
Slots
| Slot | Description |
|---|---|
(default) |
The crumbs, in order, root first. |
CSS shadow parts
| Part | Description |
|---|---|
base |
The <nav>. |
list |
The list inside it. |
menu |
The overflow menu's surface. |
separator |
The mark drawn before the trigger. |
trigger |
The button the collapsed crumbs hide behind. |
CSS custom properties
| Property | Description |
|---|---|
--bmx-breadcrumb-gap |
Space between a separator and the crumb either side of it. |
--bmx-breadcrumb-separator-content |
The mark drawn between two crumbs. Set from the separator property; override it for a house style. |
--bmx-breadcrumb-trigger-color |
The overflow button's colour. |
--bmx-breadcrumb-trigger-radius |
The overflow button's corner radius. |