title	description	lexiconDefinition	packageNpm	sibling
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.	https://liferay.design/lexicon/core-components/forms/multi-step-form/	@clayui/multi-step-nav	docs/components/css-multi-step-form.html

import { MultiStepNav, MultiStepNavWithBasicItems, } from '$packages/clay-multi-step-nav/docs/index';

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

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.

API

MultiStepNav

[APITable "clay-multi-step-nav/src/MultiStepNav.tsx"]

MultiStepNav.Divider

Extends from {`React.HTMLAttributes`}

MultiStepNav.Item

[APITable "clay-multi-step-nav/src/Item.tsx"]

MultiStepNav.Indicator

[APITable "clay-multi-step-nav/src/Indicator.tsx"]

MultiStepNav.Title

Extends from {`React.HTMLAttributes`}

MultiStepNavWithBasicItems

[APITable "clay-multi-step-nav/src/MultiStepNavWithBasicItems.tsx"]