Navigationstable

Steps

Progress through an ordered sequence — course modules, onboarding, a multi-page form — vertical or horizontal, with complete, current and upcoming steps.

Examples

Course modules

Start from the classroom (completed)

Map one real problem before touching a tool.
How models actually work

Tokens, context, and why confident answers can be wrong.
Design the assistant

Co-create the prompts with your students.

HTML for “Course modules”

<ol class="mp-steps" aria-label="Course progress">
  <li class="mp-steps__item" data-status="complete">
    <p class="mp-steps__label">Start from the classroom<span class="mp-visually-hidden"> (completed)</span></p>
    <p class="mp-steps__description">Map one real problem before touching a tool.</p>
  </li>
  <li class="mp-steps__item" aria-current="step">
    <p class="mp-steps__label">How models actually work</p>
    <p class="mp-steps__description">Tokens, context, and why confident answers can be wrong.</p>
  </li>
  <li class="mp-steps__item">
    <p class="mp-steps__label">Design the assistant</p>
    <p class="mp-steps__description">Co-create the prompts with your students.</p>
  </li>
</ol>

Horizontal

Account (completed)
Cohort (completed)
Payment
Done

HTML for “Horizontal”

<ol class="mp-steps" data-orientation="horizontal" aria-label="Enrollment">
  <li class="mp-steps__item" data-status="complete"><p class="mp-steps__label">Account<span class="mp-visually-hidden"> (completed)</span></p></li>
  <li class="mp-steps__item" data-status="complete"><p class="mp-steps__label">Cohort<span class="mp-visually-hidden"> (completed)</span></p></li>
  <li class="mp-steps__item" aria-current="step"><p class="mp-steps__label">Payment</p></li>
  <li class="mp-steps__item"><p class="mp-steps__label">Done</p></li>
</ol>

Guidance

The learning journey made visible. Completed steps turn teal with a check, the current step gets a terracotta ring (where the person is — the human register), upcoming steps stay neutral. Vertical by default, which fits module lists with descriptions; data-orientation="horizontal" for short checkout-style flows.

Accessibility

An <ol> with an aria-label announces "list, 3 items" and each position.
aria-current="step" marks — and styles — the current step.
Completion isn't an ARIA state, so completed steps carry visually hidden text, "(completed)", in addition to data-status="complete".
Steps are a progress indicator, not navigation; if steps are clickable, put a link inside .mp-steps__label.

API

Steps classes
Class	Kind
`.mp-steps`	root
`.mp-steps__item`	part of `.mp-steps`
`.mp-steps__label`	part of `.mp-steps`
`.mp-steps__description`	part of `.mp-steps`

Steps attributes
Attribute	Values
`data-status`	`complete`
`data-orientation`	`horizontal`

States styled: [aria-current="step"]. Set the native attribute or ARIA state; there are no state classes.

Steps component tokens
Token	Default	Light · dark
`--mp-steps-marker`	`2rem`	—
`--mp-steps-ring`	`var(--color-border-input)`	`#7D776E`
`--mp-steps-line`	`var(--color-border-default)`	`#E2DCD2` · `#3D3842`

Design tokens consumed: --border-width-medium --border-width-thin --color-action-primary --color-action-secondary --color-bg-primary --color-border-default --color-border-input --color-human-bg --color-human-text --color-text-on-accent --color-text-primary --color-text-secondary --font-sans --leading-small --radius-full --space-1 --space-2 --space-4 --space-6 --text-small --weight-medium --weight-semibold

Verified contrast

The build measures each pair for the defaults and for every tone, variant and state that reassigns a token, over page and card surfaces. The ratios below are the worst case in each mode; a pair below its minimum stops the build.

Steps contrast pairs
Use	Pair	Light	Dark	Minimum
step marker ring	`--mp-steps-ring` on `--color-bg-primary`	4.11	3.88	3.0

Source

README on GitHub CSS on GitHub Manifest (JSON)