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.
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
A bare token-driven classic horizontal stepper with numbered circles, gradient-painted active and done nodes, animated connectors, done/active/upcoming states, and clickable steps that jump to any stage — themed by the AI Steppers design system in both light and dark.
aria-current="step" tracks the active step for screen readersprefers-reduced-motionaria-current="step" set on the active step elementrole="status" with aria-live="polite" announces "Step X of N"role="list" with role="listitem" on each step<button> with an explicit aria-labelaria-label:focus-visible with --ring outline on the active step circleOpen Classic Stepper 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.
A token-driven onboarding stepper with a continuous progress rail, animated number-to-check nodes, a live percentage readout, and a rich per-step content stage that advances real Back/Next state — fully design-system agnostic.
A bare token-driven chevron-path stepper whose four clip-path arrow segments lock into a connected rail — a flowing accent bar runs along the bottom of completed and current segments, and eyebrow micro-labels (“Step N” / “Done”) sit above each step title.
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.
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.
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.
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.
Starting at $9.9 per month, billed annually
Don't miss a beat with our newsletter!
BUILDER
ABOUT US
© 2026 Atheros Intelligence Ltd.
prefers-reduced-motion: reduce disables all animations