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.

install	yarn add @clayui/multi-step-nav
version	3.124.0

Stable 3.124.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`Deprecated `boolean`	Flag to indicate if `complete` classname should be applied @deprecated since v3.91.0 - use `state` instead.
`expand` `boolean`	Flag to indicate if progress line should expand out from step
`state` `'error' \| 'complete'`	Defines the status of the step.

MultiStepNav.Indicator

Property	Description
`complete`Deprecated `boolean`	Flag to indicate if step should show its been completed @deprecated since v3.91.0 - this is no longer necessary.
`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.
`state` `'error' \| 'complete'`	Defines the status of the current step. The default value is 'complete'
`steps` `Array<ISteps>`	List of steps to display