Breadcrumbs

The trail that says where the current page sits in the hierarchy, and gives a way back up it.

import from ~/components/ui/breadcrumbs

Two levels

items

The shortest useful trail: one ancestor plus the current page.

Four levels

deep trail

Every ancestor is a link. The last crumb is plain text with aria-current='page', so a screen reader announces the position, not just the list.

Collapsing a long trail

maxItems (default 4)

Six crumbs, folded to four. The root survives because it is the way out, and the last survives because it is where you are.

The folded crumbs are still announced

announced: "2 more: Work, Studio"

sr-only, not aria-label

Collapsing is a visual decision, not a loss of information. A screen reader still hears the crumbs that were folded out.

Never collapse

maxItems={0}

For the rare trail where the full path IS the content, such as a file path. Everything renders, and a long one will wrap.

Rules

Do

Use it where the hierarchy is real and a user may want to step back up a level.
Put the current page last with no href; the component marks it aria-current="page".
Mirror the real URL path. A trail that lies about location is worse than none.
Let maxItems fold a long trail. The component keeps the root and the current page, and still announces what it folded.

Don't

Do not pre-slice items to shorten a trail. Hand-elided crumbs drop the skipped labels out of the accessible name.
Do not give the last crumb an href; the current page does not link to itself.
Do not use breadcrumbs on a flat site or a linear flow; there is nothing to trace.
Do not make the trail the only way back; a page still needs its own primary navigation.
Do not hand-build a trail from spans and chevrons; the nav landmark and label come from here.