Collapsed Breadcrumbs
AI Pass+navigation
design.md
Preview
1280 px
AI Assistant
Grab the code for this component with a free account
Every free component’s full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Code
Grab the code for this component with free account
Every free component's full source, ready to copy or download, plus 30 monthly AI credits for Atheros AI routing to make it yours.
Navigation component
About Collapsed Breadcrumbs
A breadcrumb trail that reveals collapsed middle levels immediately with stable accent emphasis and no layout-shifting entrance animation.
Features
- Semantic
<nav aria-label="Breadcrumb">wrapping an ordered list - Middle crumbs collapse behind an ellipsis button with
aria-expandedandaria-controls - Clicking the ellipsis reveals hidden levels immediately in accent ink without width, position, opacity, or scale animation
- Keyboard accessible — the ellipsis is a native button activated by Enter and Space
- Current page rendered as non-link text with
aria-current="page" - Leading home icon and chevron separators from real 24x24 Tabler icons
- Fully respects
prefers-reduced-motion
Accessibility
- Navigation landmark
<nav aria-label="Breadcrumb">wraps the ordered list- Expandable control
- Ellipsis button uses
aria-expandedandaria-controls - Current page
aria-current="page"on non-link current crumb- Decorative separators
- Chevrons marked
aria-hidden="true" - Focus indicators
:focus-visiblewith--ringoutline on links and the ellipsis button- Reduced motion
- Reveal geometry is motion-free;
prefers-reduced-motion: reduceshortens remaining paint transitions
Customise it with AI
Open Collapsed 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.
Explore Other Components
View all
Breadcrumbs
VanillaReact
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.
#navigation#dropdown
Pill Pagination
VanillaReact
A pure CSS pills pagination with rounded items, ellipsis windowing for 9 pages, and keyboard navigation — fully token-driven and design-system agnostic.
#cards#navigation#pagination
Icon Stepper
VanillaReact
A bare token-driven horizontal stepper that uses rounded-square Tabler icon tiles, with gradient-painted active and done tiles, animated connectors, done/active/upcoming states, and clickable steps that jump to any stage — themed by the AI Steppers design system.
#navigation#stepper#wizard
Vertical Stepper
VanillaReact
A token-driven vertical stepper with step titles, descriptions, and a vertical connector that fills downward as steps complete, plus Back/Next controls — fully design-system agnostic.
#navigation#stepper#vertical
Topline Tab Bar
ReactVanilla
A floating pill tab bar for a social app: four labelled slots with Tabler icons and a bold accent marker bar that rides the top edge above the active tab. Idle tabs rest muted, the active tab and its icon in the accent, with a springy press.
#navigation#tab-bar#social
Frosted Tab Bar
VanillaReact
A translucent five-slot mobile bottom bar floating on a tinted wash, where a frosted pane slides behind the active slot.
#bottom-nav#mobile#navigation
Ready to build?
300+ production-ready components and Atheros AI models. Every paid plan includes access to the whole Atheros — AI Builder and Learning.
Starting at $9.9 per month, billed annually
