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

  • Example
  • Fixed Width Items
  • Title
  • Buttons
  • Simplified

Example

  1. Step 01
  2. Step 02
  3. Step 03
  4. Step 04
  5. Step 05
    5. Step Five 6. Step Six 7. Step Seven 8. Step Eight
  6. Step 09
  7. Step 10
Copied!
Code Sample (expand to see it)
<ol
	class="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top"
>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 01</div>
			<a class="multi-step-icon" data-multi-step-icon="1" href="#1"></a>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 02</div>
			<a class="multi-step-icon" data-multi-step-icon="2" href="#1"></a>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 03</div>
			<a class="multi-step-icon" data-multi-step-icon="3" href="#1"></a>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 04</div>
			<a class="multi-step-icon" data-multi-step-icon="4" href="#1"></a>
		</div>
	</li>
	<li class="active multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="dropdown multi-step-indicator">
			<div class="multi-step-indicator-label">Step 05</div>
			<a
				aria-expanded="false"
				aria-haspopup="true"
				class="dropdown-toggle multi-step-icon"
				data-toggle="dropdown"
				href="#1"
				role="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-ellipsis-h"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#ellipsis-h"></use>
				</svg>
			</a>
			<div class="dropdown-menu dropdown-menu-indicator-end">
				<a class="active complete dropdown-item" href="#1">
					5. Step Five
					<span aria-hidden="true" class="dropdown-item-indicator">
						<svg
							class="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a class="complete dropdown-item" href="#1">
					6. Step Six
					<span aria-hidden="true" class="dropdown-item-indicator">
						<svg
							class="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a class="complete dropdown-item" href="#1">
					7. Step Seven
					<span aria-hidden="true" class="dropdown-item-indicator">
						<svg
							class="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a class="dropdown-item" href="#1">
					8. Step Eight
					<span aria-hidden="true" class="dropdown-item-indicator">
						<svg
							class="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
			</div>
		</div>
	</li>
	<li class="disabled multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 09</div>
			<a class="multi-step-icon" data-multi-step-icon="9" href="#1"></a>
		</div>
	</li>
	<li class="multi-step-item">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 10</div>
			<a class="multi-step-icon" data-multi-step-icon="10" href="#1"></a>
		</div>
	</li>
</ol>

Fixed Width Items

To set the fixed width between items so they are not dynamic by adding the .multi-step-item-fixed-width class.

  1. Ticket Buyer Information
    01
  2. Attendee Information
    02
  3. Seat Assignment
    03
  4. Dinner Preference
    04
  5. Submit Payment
    05
Copied!
Code Sample (expand to see it)
<ol
	class="multi-step-nav multi-step-indicator-label-bottom multi-step-item-fixed-width"
>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Ticket Buyer Information</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">01</div>
			<a class="multi-step-icon" data-multi-step-icon="1" href="#1"></a>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Attendee Information</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">02</div>
			<a class="multi-step-icon" data-multi-step-icon="2" href="#1"></a>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Seat Assignment</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">03</div>
			<a class="multi-step-icon" data-multi-step-icon="3" href="#1"></a>
		</div>
	</li>
	<li class="active multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Dinner Preference</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">04</div>
			<a class="multi-step-icon" data-multi-step-icon="4" href="#1"></a>
		</div>
	</li>
	<li class="disabled multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Submit Payment</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">05</div>
			<a
				class="multi-step-icon"
				data-multi-step-icon="5"
				href="#1"
				tabindex="-1"
			></a>
		</div>
	</li>
	<li class="multi-step-item">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<a class="multi-step-icon" data-multi-step-icon="Fin" href="#1"></a>
		</div>
	</li>
</ol>

Title

Add the title in the multi step item to provide more context by adding .multi-step-title wrapped with the text.

Copied!
Code Sample (expand to see it)
<div class="multi-step-title">Ticket Buyer Information</div>
  1. Ticket Buyer Information
    01
Copied!
Code Sample (expand to see it)
<ol class="multi-step-nav multi-step-indicator-label-bottom">
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-title">Ticket Buyer Information</div>
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">01</div>
			<a class="multi-step-icon" data-multi-step-icon="1" href="#1"></a>
		</div>
	</li>
</ol>

Buttons

You may want to control the click of the icon to do some manipulation so you can replace <a class="multi-step-icon" /> with a <button class="multi-step-icon" />.

  1. Step 01
  2. Step 02
  3. Step 03
  4. Step 04
  5. Step 05
  6. Step 09
  7. Step 10
Copied!
Code Sample (expand to see it)
<ol
	class="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top"
>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 01</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="1"
				type="button"
			></button>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 02</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="2"
				type="button"
			></button>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 03</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="3"
				type="button"
			></button>
		</div>
	</li>
	<li class="complete multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 04</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="4"
				type="button"
			></button>
		</div>
	</li>
	<li class="active multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="dropdown multi-step-indicator">
			<div class="multi-step-indicator-label">Step 05</div>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				class="btn btn-unstyled dropdown-toggle multi-step-icon"
				data-toggle="dropdown"
				type="button"
			>
				<svg
					class="lexicon-icon lexicon-icon-ellipsis-h"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#ellipsis-h"></use>
				</svg>
			</button>
			<ul class="dropdown-menu dropdown-menu-indicator-end">
				<li>
					<button
						class="active btn btn-unstyled complete dropdown-item"
						type="button"
					>
						5. Step Five
					</button>
				</li>
				<li>
					<button
						class="complete btn btn-unstyled dropdown-item"
						type="button"
					>
						6. Step Six
					</button>
				</li>
				<li>
					<button
						class="complete btn btn-unstyled dropdown-item"
						type="button"
					>
						7. Step Seven
					</button>
				</li>
				<li>
					<button
						class="btn btn-unstyled dropdown-item"
						type="button"
					>
						8. Step Eight
					</button>
				</li>
			</ul>
		</div>
	</li>
	<li class="disabled multi-step-item multi-step-item-expand">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 09</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="9"
				disabled=""
				type="button"
			></button>
		</div>
	</li>
	<li class="multi-step-item">
		<div class="multi-step-divider"></div>
		<div class="multi-step-indicator">
			<div class="multi-step-indicator-label">Step 10</div>
			<button
				class="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="10"
				type="button"
			></button>
		</div>
	</li>
</ol>

Simplified

Multi step form simplified is a more lightweight version of the multi step form. Rather than provide a complete interactive wizard display as the multi step form does, multi step form simplified simply displays text that indicates the users progress in completing the main task, guiding the user through a task divided in several steps in a light way.

User Information
Step 1 of 2
Copied!
Code Sample (expand to see it)
<div class="tbar subnav-tbar subnav-tbar-light">
	<div class="container-fluid container-fluid-max-xl">
		<div class="tbar-nav">
			<div class="tbar-item tbar-item-expand">
				<div class="tbar-section">
					<span class="component-text text-truncate-inline">
						<span class="text-truncate">User Information</span>
					</span>
				</div>
			</div>
			<div class="tbar-item">
				<span class="component-text">Step 1 of 2</span>
			</div>
		</div>
	</div>
</div>

How can this be improved? Create an issue!