Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

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.

  • Examples
  • Markup
  • API

Stable3.85.0View in LexiconCHANGELOGstorybook demos

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

MultiStepNav

PropertyDescription
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

PropertyDescription
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

PropertyDescription
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

PropertyDescription
active
number
Value for which step index is active (controlled).
activeIndexDeprecated
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
onIndexChangeDeprecated
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

How can this be improved? Create an issue!