Components/Navigation/Breadcrumb
COMPONENT35.35

Breadcrumb

Trail of nav > ol > li links with automatic separators and an ellipsis mode for long paths. Current page via aria-current.

INSTALL

1pnpm dlx @sayagodev/mo add breadcrumb

Or import the files from the package (no copy):

1import "@sayagodev/mo/css/breadcrumb.css";

EXAMPLES

Basic
With overflow menu
With dropdown
Collapsed (manual)
Collapsed (auto)
Link
Custom separator
RTL

USAGE

1<nav aria-label="breadcrumb">2  <ol>3    <li><a href="#">Home</a></li>4    <li aria-hidden="true"><svg …chevron… /></li>5    <li><a href="#">Components</a></li>6    <li aria-hidden="true"><svg … /></li>7    <li><span aria-current="page">Breadcrumb</span></li>8  </ol>9</nav>10 11<!-- collapsed (auto): add data-collapsed to nav or ol -->12<nav aria-label="breadcrumb" data-collapsed>13  <ol>14    <li><a href="#">Home</a></li>15    ... many items ...16    <li><span aria-current="page">Current</span></li>17  </ol>18</nav>19 20<!-- collapsed (manual fallback) -->21<li><span aria-hidden="true"><svg …more… /><span class="sr-only">More</span></span></li>22 23<!-- dropdown: trigger uses button ghost -->24<mo-dropdown><button class="ghost small" popovertarget="m">Components <svg …chevron-down… /></button><menu popover id="m">…</menu></mo-dropdown>

API

NAMEKINDDESCRIPTION
nav[aria-label="breadcrumb"]elementRoot nav landmark
olelementFlex wrap gap-1.5 sm:gap-2.5 text-sm muted break-words
lielementInline-flex gap-1.5
aelementMuted, transition-colors hover:text-foreground
li[aria-hidden="true"]elementSeparator, [&>svg]:size-3.5; presence opts out of auto-slash
[aria-current="page"]attributeCurrent page: foreground font-normal
span[aria-hidden]elementEllipsis: flex size-9 center svg size-4, .sr-only More (manual)
[data-collapsed]attributeAuto-collapsed: on nav or ol hides middle li and injects "…" (also data-ellipsis/data-truncated aliases)
.sr-onlyclassShared visually-hidden (in shared.css)

FILES

src/css/breadcrumb.css
Install:mo add breadcrumb

THEMING · PLAYGROUND

This is the exact component from the examples above, wearing a completely different theme. Edit the tokens and --mo-* hooks in the editor — autocomplete knows them all — and the preview obeys in real time. Your CSS always wins.

Tokens & hooks — edit live
Global tokens
--foreground--muted-foreground--radius

Preview

Your CSS

Try it: type --mo- for the component hooks, or edit any value — the preview obeys in real time.