Breadcrumb

Accessibility

Breadcrumb from @prepared911/ui/breadcrumb 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.

What you must provide

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.

Keyboard behavior

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.

Semantics and roles

<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.

Known caveats

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.

Breadcrumb / API and Development

Button / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

Breadcrumb

Accessibility

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.

What you must provide

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.

Keyboard behavior

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.

Semantics and roles

<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.

Known caveats

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.

Breadcrumb / API and Development

Button / Usage

On this page

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats