# Chevron Stepper

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

- Category: Navigation
- Frameworks: Vanilla, React + CSS, React + Tailwind
- Design system: Aperture
- Dark mode: yes
- Access: premium (Atheros AI Pass)
- Tags: stepper, wizard
- Page: https://builder.atheros.ai/components/chevron-stepper
- Preview: https://d17nmjscumqk5d.cloudfront.net/builder/templates/tpl_builder_chevron_stepper/preview-334cda5b2e0a.webp

## Features

- Bare centered stepper — no panel card or button chrome
- Four chevron/arrow segments built with `clip-path` that interlock into a single connected path
- First segment has a flat left edge and the last segment a flat right edge, both with small corner radii
- Each segment carries a small circular number badge that swaps for a checkmark once completed
- Eyebrow micro-labels (“Step N”, switching to “Done”) above each step title give two-line micro-typography
- Completed and current segments carry accent-tinted fills plus one continuous ink-bar gradient that flows along the bottom of the rail, clipped into the chevron zigzag
- The current segment adds a chevron-shaped drop-shadow glow, a slow sheen sweep, and a pulsing badge ring for stronger current-step emphasis
- Upcoming segments carry a faint ghost-chevron track so the whole arrow reads as one continuous path
- Completed segments swap their number for a checkmark cloned from a hidden SVG template
- Clickable segments jump straight to any stage and re-render all states
- Visually-hidden live region announces "Step X of N" to assistive technology
- `aria-current="step"` tracks the active step for screen readers
- Arrow-key navigation moves forward and backward through the wizard
- Responsive layout that adapts down to 320px — on narrow screens non-active labels collapse to a compact number-only track so the chevrons always fit
- Fully respects `prefers-reduced-motion`

## Accessibility

- **Current step** — `aria-current="step"` set on the active segment element
- **Live readout** — Visually-hidden `role="status"` with `aria-live="polite"` announces "Step X of N"
- **Step list semantics** — A `<nav aria-label="Setup steps">` landmark wrapping four native `<button>` segments — no list roles
- **Clickable steps** — Each segment is a native `<button>` with an explicit `aria-label`
- **Keyboard navigation** — Arrow Left/Right move between steps; Home/End jump to the first/last step
- **Button labels** — Every segment button has an explicit `aria-label`
- **Focus indicators** — `:focus-visible` with `--ring` outline on each segment
- **Decorative icons** — The checkmark SVG carries `aria-hidden="true"`
- **Reduced motion** — `prefers-reduced-motion: reduce` disables all animations

## Keyboard shortcuts

- `ArrowRight` — Advance to the next step
- `ArrowLeft` — Return to the previous step
- `Home` — Jump to the first step
- `End` — Jump to the last step
- `Enter` — Activate the focused segment
- `Space` — Activate the focused segment
- `Tab` — Move focus between the segments

## Common questions

**Which frameworks is Chevron Stepper available in?**

Chevron Stepper 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 Chevron Stepper navigation component free?**

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

**Does Chevron Stepper support dark mode?**

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

## Get the code

Preview Chevron Stepper 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/chevron-stepper

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