Multi Step Nav
yarn add @clayui/multi-step-nav
A multi step nav, also known as a wizard, is a determinate progress bar used in long processes that divides the main task into subtasks. The wizard lets the user quickly identify their current progress in completing the task and navigate forwards and backwards between steps if needed.
Stable3.36.0View in LexiconCHANGELOG
MultiStepNav
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
autoCollapse | boolean | false | true | Flag to indicate if nav should add `multi-step-nav-collapse-sm` class |
fixedWidth | boolean | false | Flag to indicate if nav should add `multi-step-item-fixed-width` class. |
MultiStepNav.Divider
Extends from React.HTMLAttributes<HTMLDivElement>MultiStepNav.Item
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
active | boolean | false | Flag to indicate if `active` classname should be applied | |
className | string | false | Additional className to apply | |
complete | boolean | false | Flag to indicate if `complete` classname should be applied | |
expand | boolean | false | Flag to indicate if progress line should expand out from step |
MultiStepNav.Indicator
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
complete | boolean | false | Flag to indicate if step should show its been completed | |
innerRef | React.Ref<HTMLButtonElement> | false | ||
label | React.ReactText | false | Value to display above step icon | |
onClick | (event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void | false | Callback for when the icon is clicked | |
spritemap | string | false | Path to clay-css spritemap | |
subTitle | React.ReactText | false | Value to display below step icon |
MultiStepNav.Title
Extends from React.HTMLAttributes<HTMLDivElement>MultiStepNavWithBasicItems
| Property | Type | Required | Default | Description |
|---|---|---|---|---|
activeIndex | number | true | Value for which step index is active | |
maxStepsShown | number | false | 7 | Determines at what point a dropdown is show. The dropdown will always show as the 2nd to last step. |
onIndexChange | (val: number) => void | true | Callback for when step is clicked | |
spritemap | string | false | Path to spritemap for icon symbol. | |
steps | Array<ISteps> | true | List of steps to display |