Breadcrumb
Usage
Shows where the current page sits in the hierarchy and offers a way back up. The last crumb is the current page: it is rendered as plain text with `aria-current="page"` rather than a link, because linking to where you already are is a dead control.import { Breadcrumb } from '@summonware/ui';Best practices
DoMirror the actual hierarchy, not the path the user happened to take to get here.
DoPut a record identifier in the final crumb — "ORD-2043" locates you better than "Detail".
Don'tUse a breadcrumb on a flat app with no hierarchy. It implies a structure that is not there.
Anatomy
Crumb *`{ label, href? }`. Omit `href` on any crumb that should not be clickable.
SeparatorThe `›` between crumbs. Rendered automatically, never for the last item.
Examples
Common configurations, variations and states.Basic
A three-level trail ending on the current record. Only the first two crumbs are links.
Deeper hierarchy
Four levels is about the practical limit before the trail starts wrapping on narrow screens.