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.

React Component
CSS / Markup

Stable 3.2.0 View in Lexicon CHANGELOG

Collapsable Steps
API

It's used when a major or big task has to be divided into smaller task, with the aim of letting the user breath in the process and providing them with a sense of progression.

Each step can have two different states: active or complete defined by props as you can see below.

One
SubOne
Two
SubTwo
Three
SubThree
Four
SubFour

import ClayMultiStepNav from '@clayui/multi-step-nav';

import ClayMultiStepNav from '@clayui/multi-step-nav';

const Component = () => {
  const [value, setValue] = useState(1);

  const steps = [
    {
      active: value === 0,
      complete: value > 0,
      onClick: () => setValue(0),
      subTitle: "SubOne",
      title: "One"
    },
    {
      active: value === 1,
      complete: value > 1,
      onClick: () => setValue(1),
      subTitle: "SubTwo",
      title: "Two"
    },
    {
      active: value === 2,
      complete: value > 2,
      onClick: () => setValue(2),
      subTitle: "SubThree",
      title: "Three"
    },
    {
      active: value === 3,
      complete: value > 3,
      onClick: () => setValue(3),
      subTitle: "SubFour",
      title: "Four"
    }
  ];

  return (
    <ClayMultiStepNav>
      {steps.map(({ active, complete, onClick, subTitle, title }, i) => (
        <ClayMultiStepNav.Item
          active={active}
          complete={complete}
          expand={i + 1 !== steps.length}
          key={i}
        >
          <ClayMultiStepNav.Title>{title}</ClayMultiStepNav.Title>
          <ClayMultiStepNav.Divider />
          <ClayMultiStepNav.Indicator
            complete={complete}
            label={1 + i}
            onClick={onClick}
            spritemap={spritemap}
            subTitle={subTitle}
          />
        </ClayMultiStepNav.Item>
      ))}
    </ClayMultiStepNav>
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(1);
  const steps = [
    {
      active: value === 0,
      complete: value > 0,
      onClick: () => setValue(0),
      subTitle: "SubOne",
      title: "One"
    },
    {
      active: value === 1,
      complete: value > 1,
      onClick: () => setValue(1),
      subTitle: "SubTwo",
      title: "Two"
    },
    {
      active: value === 2,
      complete: value > 2,
      onClick: () => setValue(2),
      subTitle: "SubThree",
      title: "Three"
    },
    {
      active: value === 3,
      complete: value > 3,
      onClick: () => setValue(3),
      subTitle: "SubFour",
      title: "Four"
    }
  ];
  return (
    <ClayMultiStepNav>
      {steps.map(({ active, complete, onClick, subTitle, title }, i) => (
        <ClayMultiStepNav.Item
          active={active}
          complete={complete}
          expand={i + 1 !== steps.length}
          key={i}
        >
          <ClayMultiStepNav.Title>{title}</ClayMultiStepNav.Title>
          <ClayMultiStepNav.Divider />
          <ClayMultiStepNav.Indicator
            complete={complete}
            label={1 + i}
            onClick={onClick}
            spritemap={spritemap}
            subTitle={subTitle}
          />
        </ClayMultiStepNav.Item>
      ))}
    </ClayMultiStepNav>
  );
};
render(<Component />);

Collapsable Steps

Using ClayMultiStepNavWithBasicItems in combination with maxStepsShown prop you can collapse the steps that don't fit into a dropdown to ensure good user experience.

One
SubOne
Two
Four
SubFour

import {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav';

import {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav';

const Component = props => {
  const [active, setActive] = useState(0);

  const steps = [
    {
      subTitle: "SubOne",
      title: "One"
    },
    {
      subTitle: "SubTwo",
      title: "Two"
    },
    {
      subTitle: "SubThree",
      title: "Three"
    },
    {
      subTitle: "SubFour",
      title: "Four"
    }
  ];

  return (
    <ClayMultiStepNavWithBasicItems
      activeIndex={active}
      maxStepsShown={2}
      onIndexChange={setActive}
      spritemap={spritemap}
      steps={steps}
    />
  );
};

render(<Component />);

const Component = props => {
  const [active, setActive] = useState(0);
  const steps = [
    {
      subTitle: "SubOne",
      title: "One"
    },
    {
      subTitle: "SubTwo",
      title: "Two"
    },
    {
      subTitle: "SubThree",
      title: "Three"
    },
    {
      subTitle: "SubFour",
      title: "Four"
    }
  ];
  return (
    <ClayMultiStepNavWithBasicItems
      activeIndex={active}
      maxStepsShown={2}
      onIndexChange={setActive}
      spritemap={spritemap}
      steps={steps}
    />
  );
};
render(<Component />);

API

MultiStepNav

Property	Type	Required	Default	Description
autoCollapse	boolean	false	true	Flag to indicate if nav should add `multi-step-nav-collapse-sm` class
fixedWidth	boolean	false		Flag to indicate if nav should add `multi-step-item-fixed-width` class.

MultiStepNav.Divider

Extends from React.HTMLAttributes<HTMLDivElement>

MultiStepNav.Item

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

MultiStepNav.Indicator

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

MultiStepNav.Title

Extends from React.HTMLAttributes<HTMLDivElement>

MultiStepNavWithBasicItems

Property	Type	Required	Default	Description
activeIndex	number	true		Value for which step index is active
maxStepsShown	number	false	7	Determines at what point a dropdown is show. The dropdown will always show as the 2nd to last step.
onIndexChange	(val: number) => void	true		Callback for when step is clicked
spritemap	string	false		Path to spritemap for icon symbol.
steps	Array<ISteps>	true		List of steps to display

Example
Fixed width items
Title
Buttons
Simplified

Example

Step 01
Step 02
Step 03
Step 04
Step 05

5. Step Five 6. Step Six 7. Step Seven 8. Step Eight
Step 09
Step 10

<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.

Ticket Buyer Information

01
Attendee Information

02
Seat Assignment

03
Dinner Preference

04
Submit Payment

05

<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.

<div class="multi-step-title">Ticket Buyer Information</div>

Ticket Buyer Information

01

<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" />.

Step 01
Step 02
Step 03
Step 04
Step 05
Step 09
Step 10

<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

<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>