WizardNav
Displays wizard steps in a vertical or horizontal list.
WizardNav displays wizard steps in a vertical or horizontal list.
Import
import { WizardNav } from "@solarius/onset";Props
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | "vertical" | "horizontal" | "vertical" | Rail or band. |
variant | "circles" | "bars" | "dots" | "panels" | "panels" vertical, "circles" horizontal | Stepper's drawing. A rail is navigation, so its steps default to pressable tiles; a band above the pane is the numbered strip. |
size | "sm" | "md" | "lg" | "md" | Sets marker size, font size, and spacing for the step navigation. |
tone | ToneProp | "primary" | Accent for done and current markers and the filled run of line. |
labelPlacement | "inline" | "below" | "none" | "inline" | Passed to the stepper. below only makes sense on a horizontal band. |
showConnectors | boolean | true | The line between step markers. It breaks at every group heading, so a grouped rail reads as blocks. |
showNumbers | boolean | true | Numbers in the markers of steps that are neither done, errored nor skipped. |
showDetails | boolean | true | Shows step hints and Optional or Skipped labels. When false, displays step labels only. |
fill | boolean | true | Distributes horizontal steps evenly. Below-label connectors require equal-width columns. |
as | ElementType | "nav" | The root element. The nav is a landmark named by labels.nav. |
renderItem | (step: WizardStep, state) => ReactNode | — | Custom step content receiving the step and index, status, reachable, and select values. Retains navigation buttons and state styling. |
renderMarker | (step: Step, state: StepState) => ReactNode | — | Replaces the marker and retains the label column. Receives the mapped Stepper step. |