Default
<Breadcrumbs items={[
{ label: "Home", href: "/" },
{ label: "Components", href: "/components" },
{ label: "Breadcrumbs" },
]} />Deep path
<Breadcrumbs items={[
{ label: "Home", href: "/" },
{ label: "Applying the Brand", href: "/applying" },
{ label: "Graphic System", href: "/applying#system" },
{ label: "Isometric patterns" },
]} />Accessibility
How Breadcrumbs works with assistive tech
- Role
- navigation
- Keyboard
- Tab / Enter (native link navigation)
- ARIA attributes
- aria-label="Breadcrumb" on <nav>; aria-current="page" on last item
- Focus behavior
- visible-3px (global outline)
Use <ol> for ordered list semantics. Separator character is decorative (aria-hidden).