Breadcrumb from @prepared911/ui-core is a navigation landmark with a trailing current page. The component wires the landmark label, current-page semantics, and hidden separators; your job is to keep labels short, meaningful, and reflective of the actual hierarchy.
What the component handles
- Landmark label. Root
<nav> exposes aria-label="breadcrumb".
- Current page.
BreadcrumbPage renders as the current location (not a link) with aria-current="page".
- Decorative separators. Separators use
role="presentation" with aria-hidden.
- Ellipsis affordance. Overflow ellipsis includes visually hidden "More" text and a menu trigger for the collapsed segments.
- Real labels. Each crumb should name the page or section a user can return to—not slugs or IDs. Match the page title, not the URL segment.
- True hierarchy. The trail must reflect the actual path the user took into the current view; don't fabricate shortcuts.
- Single current page. Only the last crumb uses
BreadcrumbPage; all earlier crumbs are real links.
- Tab / Shift+Tab move between links.
- Enter activates the focused link.
- If the ellipsis expands a menu, Enter / Space opens the menu and arrow keys navigate its items.
<nav aria-label="breadcrumb"> landmark with an ordered list inside.- Links expose
role="link"; the current page renders with aria-current="page".
- Separators are
aria-hidden.
- Truncated labels. If a label must truncate, expose the full title via
title or a tooltip so assistive tech can still read it.
- Deep trails on narrow viewports. When the trail overflows, use the ellipsis pattern; don't hide the first or last crumb.
