COMPONENTS

Step navigation

One ordered-list class presents the stages of a process. Current state and destinations stay in native HTML.

Usage

Markup: ol.steps > li > a or span

Behaviour: Native process navigation; application supplies stage state and destinations.

  • Use ol.steps with li children and aria-current="step" on the current link or span. Visible labels identify current, completed and upcoming stages; CSS does not infer completion.
  • Use real links only for stages the user can visit. A plain span represents a future or unavailable stage without creating a fake disabled control.
  • The list wraps on narrow screens and uses logical spacing. Applications supply validation, navigation and stage state; this is not a client-side wizard.
  • Available in core, components, scoped and standalone reva.steps.css builds. No new data attributes.

Component API and styling module · Inherited appearance settings

Order progress

Completed and upcoming states are explicit text, with native current-step semantics.

Your order

Review your bag before supplying delivery details.

HTMLSelect text to copy
<nav aria-label="Order stages"><ol class="steps" role="list">
<li><a href="#steps-bag">Bag</a><small>Complete</small></li>
<li><span aria-current="step">Delivery</span><small>Current stage</small></li>
<li><span>Payment</span><small>Upcoming</small></li>
</ol></nav>
<section id="steps-bag"><h3>Your order</h3><p>Review your bag before supplying delivery details.</p></section>