# Steps
- **Category:** Navigation (`navigation`)
- **Slug:** `navigation/steps`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { Steps } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/navigation/steps
> Stepper — an ordered list of [ 0N ]-marked steps joined by hairline connectors, with done / active / pending states. Vertical or horizontal.
## When to use it
Use **Steps** to show progress through an *ordered* process where sequence matters — an onboarding wizard, a deploy pipeline, a multi-sig approval flow.
- Showing a continuous ratio (73% uploaded)? Use **ProgressBar**, not discrete steps.
- A dated history of things that already happened? Use **Timeline**.
- Independent, unordered sections the user opens at will? Use **Accordion**.
- Steps renders state only — keep the actual current-step logic in your app and pass `active`.
## Props
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `active` | `number` | no | `0` | Zero-based index of the current step. Earlier steps read as done, later as pending. |
| `className` | `string` | no | — | — |
| `items` | `StepItem[]` | yes | — | The ordered steps. |
| `orientation` | `enum` | no | `vertical` | Layout axis. Default "vertical". |
| `style` | `CSSProperties` | no | — | — |
## Examples
### Basics
Pass `items` (title + optional description) and the zero-based `active` index. Earlier steps read as done, the active step inks its title and grows an accent rule, later steps read muted.
```tsx
import { Steps } from "@protocore/pds";
export default function StepsBasics() {
return (
);
}
```
### Horizontal
`orientation="horizontal"` lays the steps in a row — good for a compact status strip above content.
```tsx
import { Steps } from "@protocore/pds";
export default function StepsHorizontal() {
return (
);
}
```
## Do & don't
**Do**
- Keep step titles to a short verb phrase; put detail in the description line.
- Drive active from the single source of truth for where the flow is.
- Use horizontal orientation for 3–5 short steps, vertical when descriptions are long.
- Order steps in the real sequence the user experiences.
**Don't**
- Don't use Steps for a continuous percentage — reach for ProgressBar.
- Don't let the user jump to a later step the flow hasn't unlocked without validating.
- Don't cram ten steps into a horizontal row on mobile.
- Don't rely on the marker color alone — each step also carries state text and position.
## Accessibility
**Notes**
- Steps renders an ordered list (``); each `- ` carries `data-state` (done / active / pending) and the active step is marked `aria-current="step"`.
- The `[ 0N ]` markers convey position textually, so progress is not signalled by color alone.
- Steps is non-interactive display; if a step must be clickable, wrap its content in your own button and manage focus there.
## Related
`timeline`, `progress-bar`, `accordion`, `page-header`
---
© Protocore. All rights reserved. Use of the Protocore Design System requires prior written authorization from Protocore (contact@protocore.io). These machine-readable materials must not be ingested into ML-training datasets or derivative design systems. See https://pds.protocore.io/legal/