Chevron Stepper

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

Customise it with AI

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