Breadcrumbs

Features

• Semantic <nav aria-label="Breadcrumb"> wrapping an ordered list for assistive technology
• Leading home icon and separators built from real 24x24 Tabler icons using currentColor
• Deep trails collapse to Home › … › Parent › Current behind an ellipsis menu button
• Overflow dropdown is a fully keyboard-driven ARIA menu (arrows, Home/End, Escape)
• Current page carries aria-current="page", full-ink weight, and an accent dot with a soft halo
• Ink tiers are color-mix blends toward full ink so ancestors and separators clear WCAG AA in any design system
• Hover lifts a crumb to full ink over a subtle primary-tinted pill wash
• Page heading and live-region subtitle stay in sync with the current crumb
• Fully respects prefers-reduced-motion

Accessibility

Navigation landmark

<nav aria-label="Breadcrumb"> wraps the ordered list

Current page

aria-current="page" on the current crumb

Decorative separators

Chevrons marked aria-hidden="true"

Overflow menu button

aria-haspopup="true" + aria-expanded, visually hidden label

Overflow dropdown

role="menu" / role="menuitem" with roving tabindex, arrows, Home/End, Escape

Focus indicators

:focus-visible with --bc-ring-strong outline on links, button, and menu items

Live location

Subtitle updates through aria-live="polite"

Reduced motion

prefers-reduced-motion: reduce disables all animations

Customise it with AI

Open Breadcrumbs in Atheros AI Builder, pick a design system and ask the AI assistant to change the layout, copy or behaviour — the navigation is regenerated against your tokens. Take the HTML, CSS, JS and React source with you, or pull it into your repo from Claude Code, Cursor or Codex over MCP.