Multi Step Nav
View in LexiconA 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.
| install | yarn add @clayui/multi-step-nav |
|---|---|
| version |  |
| use | import MultiStepNav from '@clayui/multi-step-nav'; |
Table of Contents
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.
import {Provider} from '@clayui/core';
import MultiStepNav from '@clayui/multi-step-nav';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(1);
const steps = [
{
subTitle: 'SubOne',
title: 'One',
},
{
subTitle: 'SubTwo',
title: 'Two',
},
{
subTitle: 'SubThree',
title: 'Three',
},
{
subTitle: 'SubFour',
title: 'Four',
},
];
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<MultiStepNav>
{steps.map(({subTitle, title}, i) => {
const complete = value > i;
return (
<MultiStepNav.Item
active={value === i}
expand={i + 1 !== steps.length}
key={i}
state={complete ? 'complete' : undefined}
>
<MultiStepNav.Title>{title}</MultiStepNav.Title>
<MultiStepNav.Divider />
<MultiStepNav.Indicator
complete={complete}
label={1 + i}
onClick={() => setValue(i)}
subTitle={subTitle}
/>
</MultiStepNav.Item>
);
})}
</MultiStepNav>
</div>
</Provider>
);
}
Center
The center boolean property centers the multi-step-nav.
import {Provider} from '@clayui/core';
import MultiStepNav from '@clayui/multi-step-nav';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(1);
const steps = [
{
subTitle: 'Step 01',
title: 'Ticket Buyer Information',
},
{
subTitle: 'Step 02',
title: 'Attendee Information',
},
{
subTitle: 'Step 03',
title: 'Payment Information',
},
{
subTitle: 'Step 04',
title: 'Completed',
},
];
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<MultiStepNav center>
{steps.map(({subTitle, title}, i) => {
const complete = value > i;
return (
<MultiStepNav.Item
active={value === i}
expand={i + 1 !== steps.length}
key={i}
state={complete ? 'complete' : undefined}
>
<MultiStepNav.Title>{title}</MultiStepNav.Title>
<MultiStepNav.Divider />
<MultiStepNav.Indicator
complete={complete}
label={1 + i}
onClick={() => setValue(i)}
subTitle={subTitle}
/>
</MultiStepNav.Item>
);
})}
</MultiStepNav>
</div>
</Provider>
);
}
State
Each step can have two different states: active or complete defined by props as you can see below.
The active state can be set using the active property in the ClayMultiStepNav.Item or ClayMultiStepNavWithBasicItems component which defines the step index.
The complete and error states are defined using the state property in the ClayMultiStepNav.Item which defines whether the item is complete or has an error in the current state. The ClayMultiStepNavWithBasicItems component follows the same API with the difference that it sets the state of the item to the current step which is set when using the active or defaultActive API.
import {Provider} from '@clayui/core';
import {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(1);
const steps = [
{
subTitle: 'SubOne',
title: 'One',
},
{
subTitle: 'SubTwo',
title: 'Two',
},
{
subTitle: 'SubThree',
title: 'Three',
},
{
subTitle: 'SubFour',
title: 'Four',
},
];
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayMultiStepNavWithBasicItems
active={value}
onActiveChange={setValue}
state="error"
steps={steps}
/>
</div>
</Provider>
);
}
Indicator position
Some use cases don’t need the title or subtitle to add context to the steps, in those cases you might just want the label to be rendered to the top of the indicator, so it can truncate the text if it is long.
<ClayMultiStepNav indicatorLabel="top">
<ClayMultiStepNav.Item
active={active}
complete={complete}
expand={i + 1 !== steps.length}
key={i}
>
<ClayMultiStepNav.Divider />
<ClayMultiStepNav.Indicator
complete={complete}
label={1 + i}
onClick={onClick}
subTitle={label}
/>
</ClayMultiStepNav.Item>
</ClayMultiStepNav>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.
import {Provider} from '@clayui/core';
import {ClayMultiStepNavWithBasicItems} from '@clayui/multi-step-nav';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(1);
const steps = [
{
subTitle: 'SubOne',
title: 'One',
},
{
subTitle: 'SubTwo',
title: 'Two',
},
{
subTitle: 'SubThree',
title: 'Three',
},
{
subTitle: 'SubFour',
title: 'Four',
},
];
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayMultiStepNavWithBasicItems
active={value}
maxStepsShown={2}
onActiveChange={setValue}
steps={steps}
/>
</div>
</Provider>
);
}
Table of Contents