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.

Stable 3.85.0 View in Lexicon CHANGELOG

MultiStepNav
MultiStepNav.Divider
MultiStepNav.Item
MultiStepNav.Indicator
MultiStepNav.Title
MultiStepNavWithBasicItems

MultiStepNav

Property	Description
`autoCollapse` `boolean`	Flag to indicate if nav should add `multi-step-nav-collapse-sm` class The default value is true
`fixedWidth` `boolean`	Flag to indicate if nav should add `multi-step-item-fixed-width` class.
`indicatorLabel` `'bottom' \| 'top'`	Flag to indicate the position of the indicator label. The default value is 'bottom'

MultiStepNav.Divider

Extends from React.HTMLAttributes<HTMLDivElement>

MultiStepNav.Item

Property	Description
`active` `boolean`	Flag to indicate if `active` classname should be applied
`className` `string`	Additional className to apply
`complete` `boolean`	Flag to indicate if `complete` classname should be applied
`expand` `boolean`	Flag to indicate if progress line should expand out from step

MultiStepNav.Indicator

Property	Description
`complete` `boolean`	Flag to indicate if step should show its been completed
`innerRef` `React.Ref<HTMLButtonElement>`
`label` `React.ReactText`	Value to display above step icon
`onClick` `(event: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void`	Callback for when the icon is clicked
`spritemap` `string`	Path to clay-css spritemap
`subTitle` `React.ReactText`	Value to display below step icon

MultiStepNav.Title

Extends from React.HTMLAttributes<HTMLDivElement>

MultiStepNavWithBasicItems

Property	Description
`active` `number`	Value for which step index is active (controlled).
`activeIndex`Deprecated `number`	Value for which step index is active @deprecated since v3.52.0 - use `active` instead.
`defaultActive` `number`	Set the default value of active state (uncontrolled).
`maxStepsShown` `number`	Determines at what point a dropdown is show. The dropdown will always show as the 2nd to last step. The default value is 7
`onActiveChange` `InternalDispatch<number>`	Callback for when step is clicked
`onIndexChange`Deprecated `InternalDispatch<number>`	Callback for when step is clicked @deprecated since v3.52.0 - use `onActiveChange` instead.
`spritemap` `string`	Path to spritemap for icon symbol.
`steps` `Array<ISteps>`	List of steps to display