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.

installyarn add @clayui/multi-step-nav
versionNPM Version
useimport MultiStepNav from '@clayui/multi-step-nav';

Example

  1. Step 01
  2. Step 02
  3. Step 03
  4. Step 04
  5. Step 05
    5. Step Five6. Step Six7. Step Seven8. Step Eight
  6. Step 09
  7. Step 10
<ol
	className="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top"
>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 01</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="1"
				href="#1"
			></a>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 02</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="2"
				href="#1"
			></a>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 03</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="3"
				href="#1"
			></a>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 04</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="4"
				href="#1"
			></a>
		</div>
	</li>
	<li className="active multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="dropdown multi-step-indicator">
			<div className="multi-step-indicator-label">Step 05</div>
			<a
				aria-expanded="false"
				aria-haspopup="true"
				className="dropdown-toggle multi-step-icon"
				data-toggle="dropdown"
				href="#1"
				role="button"
			>
				<svg
					className="lexicon-icon lexicon-icon-ellipsis-h"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#ellipsis-h"></use>
				</svg>
			</a>
			<div className="dropdown-menu dropdown-menu-indicator-end">
				<a className="active complete dropdown-item" href="#1">
					5. Step Five
					<span
						aria-hidden="true"
						className="dropdown-item-indicator"
					>
						<svg
							className="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a className="complete dropdown-item" href="#1">
					6. Step Six
					<span
						aria-hidden="true"
						className="dropdown-item-indicator"
					>
						<svg
							className="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a className="complete dropdown-item" href="#1">
					7. Step Seven
					<span
						aria-hidden="true"
						className="dropdown-item-indicator"
					>
						<svg
							className="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
				<a className="dropdown-item" href="#1">
					8. Step Eight
					<span
						aria-hidden="true"
						className="dropdown-item-indicator"
					>
						<svg
							className="lexicon-icon lexicon-icon-check"
							focusable="false"
							role="presentation"
						>
							<use href="/images/icons/icons.svg#check"></use>
						</svg>
					</span>
				</a>
			</div>
		</div>
	</li>
	<li className="disabled multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 09</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="9"
				href="#1"
			></a>
		</div>
	</li>
	<li className="multi-step-item">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 10</div>
			<a
				className="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
<ol
	className="multi-step-nav multi-step-indicator-label-bottom multi-step-item-fixed-width"
>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Ticket Buyer Information</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">01</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="1"
				href="#1"
			></a>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Attendee Information</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">02</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="2"
				href="#1"
			></a>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Seat Assignment</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">03</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="3"
				href="#1"
			></a>
		</div>
	</li>
	<li className="active multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Dinner Preference</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">04</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="4"
				href="#1"
			></a>
		</div>
	</li>
	<li className="disabled multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Submit Payment</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">05</div>
			<a
				className="multi-step-icon"
				data-multi-step-icon="5"
				href="#1"
				tabindex="-1"
			></a>
		</div>
	</li>
	<li className="multi-step-item">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<a
				className="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.

<div className="multi-step-title">Ticket Buyer Information</div>
  1. Ticket Buyer Information
    01
<ol className="multi-step-nav multi-step-indicator-label-bottom">
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-title">Ticket Buyer Information</div>
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">01</div>
			<a
				className="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 className="multi-step-icon" /> with a <button className="multi-step-icon" />.

  1. Step 01
  2. Step 02
  3. Step 03
  4. Step 04
  5. Step 05
  6. Step 09
  7. Step 10
<ol
	className="multi-step-nav multi-step-nav-collapse-sm multi-step-indicator-label-top"
>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 01</div>
			<button
				className="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="1"
				type="button"
			></button>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 02</div>
			<button
				className="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="2"
				type="button"
			></button>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 03</div>
			<button
				className="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="3"
				type="button"
			></button>
		</div>
	</li>
	<li className="complete multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 04</div>
			<button
				className="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="4"
				type="button"
			></button>
		</div>
	</li>
	<li className="active multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="dropdown multi-step-indicator">
			<div className="multi-step-indicator-label">Step 05</div>
			<button
				aria-expanded="false"
				aria-haspopup="true"
				className="btn btn-unstyled dropdown-toggle multi-step-icon"
				data-toggle="dropdown"
				type="button"
			>
				<svg
					className="lexicon-icon lexicon-icon-ellipsis-h"
					focusable="false"
					role="presentation"
				>
					<use href="/images/icons/icons.svg#ellipsis-h"></use>
				</svg>
			</button>
			<ul className="dropdown-menu dropdown-menu-indicator-end">
				<li>
					<button
						className="active btn btn-unstyled complete dropdown-item"
						type="button"
					>
						5. Step Five
					</button>
				</li>
				<li>
					<button
						className="complete btn btn-unstyled dropdown-item"
						type="button"
					>
						6. Step Six
					</button>
				</li>
				<li>
					<button
						className="complete btn btn-unstyled dropdown-item"
						type="button"
					>
						7. Step Seven
					</button>
				</li>
				<li>
					<button
						className="btn btn-unstyled dropdown-item"
						type="button"
					>
						8. Step Eight
					</button>
				</li>
			</ul>
		</div>
	</li>
	<li className="disabled multi-step-item multi-step-item-expand">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 09</div>
			<button
				className="btn btn-unstyled multi-step-icon"
				data-multi-step-icon="9"
				disabled=""
				type="button"
			></button>
		</div>
	</li>
	<li className="multi-step-item">
		<div className="multi-step-divider"></div>
		<div className="multi-step-indicator">
			<div className="multi-step-indicator-label">Step 10</div>
			<button
				className="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
<div className="tbar subnav-tbar subnav-tbar-light">
	<div className="container-fluid container-fluid-max-xl">
		<div className="tbar-nav">
			<div className="tbar-item tbar-item-expand">
				<div className="tbar-section">
					<span className="component-text text-truncate-inline">
						<span className="text-truncate">User Information</span>
					</span>
				</div>
			</div>
			<div className="tbar-item">
				<span className="component-text">Step 1 of 2</span>
			</div>
		</div>
	</div>
</div>
Edit this page on GitHub

Contributors

Table of Contents