Breadcrumb@prepared911/ui/breadcrumb
Copy link to this section
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. Copy link to this section
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. Copy link to this section
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. Copy link to this section
<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. Copy link to this section
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.