Navigation

Steps

Progress through a known sequence: done, current and upcoming steps, horizontal or vertical.

Ant Design: Steps

import { Steps } from '@alea/ui';

Examples

Done steps can be revisited with onStepPress.

For side panels and long flows.

Progress through a known sequence: done, current and upcoming steps.

Prop	Type	Default	Description
`current`required	`Key`	-	The step in progress (by id). Earlier steps show as done.
`steps`required	`Step[]`	-	The steps: id, title, optional description.
`aria-label`	`string`	-	Name of the list. Default "Progress".
`className`	`string`	-	Extra class names for the root element.
`onStepPress`	`((id: Key) => void)`	-	Lets people jump back to finished steps.
`orientation`	`"horizontal" \| "vertical"`	`'horizontal'`	horizontal (default) or vertical.

An ordered list; the current step has aria-current="step" and done steps say so.

Key	Does
`Tab`	Moves to the steps you can go back to
`Enter`	Goes to that step (with onStepPress)

Don't