Every multi-step checkout has a progress stepper, and most of them are decorative — ticks that mean "you clicked next", steps you can't click back to, and a bar that claims 75% when the hard part (payment) is all of the remaining 25%. A stepper is a promise about effort; breaking it is how carts get abandoned at step three.
Velocity X's standard-progress-breadcrumb encodes the honest version as a three-state contract.
The Money Pattern
Each step is exactly one of three states, and each state has one meaning:
type StepState = 'completed' | 'current' | 'upcoming';
// completed = this step's data passed validation (not "was visited")
// current = aria-current="step", exactly one at a time
// upcoming = not yet reachable by click
<ol class="flex items-center gap-2">
{steps.map((s, i) => (
<li>
{s.state === 'completed' ? (
<a href={s.href} class="flex items-center gap-1.5">
<CheckCircle /> {s.label}
</a>
) : (
<span aria-current={s.state === 'current' ? 'step' : undefined}>
{s.label}
</span>
)}
</li>
))}
</ol>Two rules hide in that markup. Completed steps are links — a buyer who wants to fix their shipping address mid-payment must be able to go back without fear. Upcoming steps are not links — skipping ahead past unvalidated steps is how half-complete orders reach your API.
The Catch
Back-navigation is only safe if it's lossless: everything typed on steps ahead of the one being revisited survives the round trip. That's a state-architecture decision (the wizard's single form state, same as the multi-step form pattern) — the stepper just exposes whether you got it right.
Count honestly. "Review" isn't a step if it's a summary with a button; four steps that are really three reads as padding, and the progress psychology works against you. And never mark the final step complete before the payment actually settles — an optimistic tick on a declined card is the worst message in commerce.
The Verdict
Completed = validated, clickable = lossless, upcoming = locked, count = real. Four invariants, one trustworthy stepper. It ships in Velocity X's Standard Navigation category, built to sit on top of the wizard state you already have.