Breadcrumb
Hierarchical page trail.
Usage
Compose Root > List > Item, with a Separator between items. Root is
a <nav> landmark labelled "Breadcrumb" by default — that label is what
lets a screen reader user tell it apart from the site's main navigation.
The last crumb
Set current on the final Link. It then renders
as plain text with aria-current="page" instead of an anchor — because a
link to the page you are already on is a dead end, and a keyboard user should not have to tab through
it.
It also stops looking like a link, which is the honest signal: nothing happens if you click it.
Separators are decorative
Separator carries aria-hidden and role="presentation", so a screen reader reads "Home, Components,
Breadcrumb" rather than "Home, slash, Components, slash, Breadcrumb". The glyph is visual
punctuation; it means nothing spoken.
Pass children to replace the default chevron.
Why this one is custom
Every other component in sve-ui wraps a Bits UI primitive. This one does not, and it is not an
oversight: a <nav> wrapping an ordered list is a breadcrumb
trail. There is no keyboard behaviour to manage and no ARIA to invent.
The list is <ol>, not <ul>,
because the order carries meaning — the trail is a sequence from root to current page.
Reaching for a headless primitive here would add a dependency to reproduce what HTML already
does correctly.
Props
Breadcrumb.Root
| Prop | Type | Default |
|---|---|---|
label Accessible name for the navigation landmark. | string | 'Breadcrumb' |
class Extra classes merged onto the nav. | string | — |
children Compose `Breadcrumb.List` inside. | Snippet | — |
Breadcrumb.Link — plus the native anchor attributes.
| Prop | Type | Default |
|---|---|---|
current Marks this as the page the user is on. The last crumb should set it: it renders as plain text instead of a link and reports `aria-current="page"`, because a link to the page you are already on is a dead end. | boolean | false |
class Extra classes merged onto the link. | string | — |
children | Snippet | — |
List, Item and Separator each take class plus their native attributes.