# Breadcrumbs

> A refined, accessible breadcrumb trail with a leading home icon, chevron separators, an overflow dropdown that collapses deep hierarchies behind an ellipsis, and an `aria-current` active page that drives the page heading.

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Vector
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: dropdown
- Page: https://builder.atheros.ai/components/breadcrumbs
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_breadcrumbs/preview-c66c8f6f83ee.webp

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

## Keyboard shortcuts

- `Tab` — Move focus between crumb links and the ellipsis button
- `Enter` — Activate the focused crumb, button, or menu item
- `ArrowDown / ArrowUp` — Open the dropdown from the button; cycle items inside it
- `Home / End` — Jump to the first / last dropdown item
- `Escape` — Close the dropdown and restore focus to the ellipsis button

## Common questions

**Which frameworks is Breadcrumbs available in?**

Breadcrumbs ships as Vanilla, React + CSS and React + Tailwind — HTML, CSS, JS and React source you can copy, download or clone into Atheros AI Builder.

**Is the Breadcrumbs navigation component free?**

Breadcrumbs is a premium component. Anyone can preview it; the source, downloads and AI customisation are included with Atheros AI Pass.

**Does Breadcrumbs support dark mode?**

Yes. Breadcrumbs ships light and dark themes, both drawn from the Vector design system's tokens. Switch the preview to dark mode to compare them.

## Get the code

Preview Breadcrumbs live, then sign in to copy or download the source, apply another design system, or ask the AI assistant to change it: https://builder.atheros.ai/components/breadcrumbs

Every component on https://builder.atheros.ai is also reachable from Claude Code, Cursor and Codex through the Atheros MCP server (paid plans). Component index: https://builder.atheros.ai/llms-components.txt