Internal QA/reference page for the canonical LAGO breadcrumb navigation. Every example uses the real production Breadcrumbs component. Not linked from any product navigation.
DS-006 LagoBreadcrumbs — hierarchical navigation within Lago management pages. Current page is not clickable; breadcrumbs are used only when hierarchy is meaningful; long paths collapse on narrow screens.
nav landmark → items separated by ChevronRight (16px / 2px stroke). Intermediate items are Links; the current page is a non-clickable span.
Standard 4-level path, intermediate link behavior, current-page styling, and a valid single-level breadcrumb.
4-level hierarchy. First three items are clickable Links; the last is a non-clickable span.
Home, Experiences, and Miami are keyboard-navigable Links with visible focus rings. Hover transitions to text-lago-text-primary.
The last item (Private Yacht Charter) is a span with aria-current='page' and text-lago-text-primary — not a link, not interactive.
A valid single-level breadcrumb. No separator, no unnecessary hierarchy.
Approved Lucide item icons at 16px / 2px stroke. No Unicode icons, emoji, custom replacements, or other icon libraries.
Each item carries an optional Lucide icon rendered before the label at h-4 w-4 (16px) with strokeWidth={2}.
A realistic 6-level hierarchy. On narrow screens (<640px) the intermediate levels collapse to first + … + current.
Home > Experiences > Ontario > Muskoka > Gravenhurst > Private Yacht Charter. Resize below 640px to see the collapse.
Collapse behavior for paths >3 items on narrow screens, and long-label containment verification.
At <640px: first item + ellipsis (…) + current page. Intermediate levels are hidden. First meaningful level and current page are preserved.
Resize below 640px to see collapse
Realistic long label in the current page. min-w-0 + truncate contain it — no horizontal page overflow.
Explicit viewport specimens at 1534, 1024, 768, 430, 390, 375, and 320px. Each shows a 4-item and 6-item path. Scroll horizontally if wider than your viewport.
Home > Experiences > Miami > Private Yacht Charter. No collapse at any width (≤3 items threshold).
1534px — Desktop
1024px — Desktop / Tablet boundary
768px — Tablet
430px — Mobile
390px — Mobile
375px — Mobile
320px — Mobile
Home > Experiences > Ontario > Muskoka > Gravenhurst > Private Yacht Charter. Collapses to first + … + current below 640px (visible at 430, 390, 375, 320).
1534px — Desktop
1024px — Desktop / Tablet boundary
768px — Tablet
430px — Mobile
390px — Mobile
375px — Mobile
320px — Mobile
nav landmark, aria-label, aria-current, keyboard focus, visible focus ring, current page not interactive, links remain keyboard accessible.
Tab through the links below — each has a visible focus ring. The current page (last item) is a span, not a link, and receives no focus.
<nav> elementaria-label="Breadcrumb" on the navaria-current="page" on the last item span<span>, not a Link; no tabindex, no onClick<Link>s, natively focusablearia-hidden="true" on all Lucide icons and separatorsBreadcrumbs rendered above a LagoPageHeader specimen using the ACTUAL production components. Breadcrumbs are not merged into PageHeader — they are siblings.
The LagoPageHeader accepts a breadcrumbs prop and renders it above the title/action row. Both components are production, unmodified.
Discover and book premium water experiences across Ontario.
The same breadcrumbs rendered directly, without PageHeader — as they appear when used independently.