Steps enables a multi-step workflow allowing a user to complete a goal in a specific sequence.
Installation
<script type="module">
import '@nvidia-elements/core/steps/define.js';
</script>
<nve-steps behavior-select>
<nve-steps-item status="success">Step 1</nve-steps-item>
<nve-steps-item status="danger">Step 2</nve-steps-item>
<nve-steps-item selected>Step 3</nve-steps-item>
<nve-steps-item status="pending">Step 4</nve-steps-item>
<nve-steps-item disabled>Disabled</nve-steps-item>
</nve-steps>
By showing less information at a time, multi-step workflows allow users to focus better on the content pertinent to each step and decrease the chance of errors.
The Steps component consists of a steps parent element and many steps-item elements slotted as children. The selected attribute applied by the host application gives the selected step the proper selected styles.
Apply the disabled attribute to an item to get the proper visual cues and prevent interaction. The elements handle all default interaction, hover, and active states.
Additionally, the component handles all keyboard navigation and accessibility concerns out of the box. Try using left/right arrow keys on horizontal steps or up/down arrow keys on vertical steps.
Condensed
Demonstrates different container styles to accommodate visual weight and context.
Condensed step indicator with reduced visual weight. Ideal for space-constrained layouts or secondary navigation where steps need less prominence.
Vertical Steps
Determines whether the steps should display in a vertical layout vs. defaulting to horizontal.
Vertical step layout for sidebar navigation or tall containers. Use when horizontal space constrains layout or steps require longer labels.
Vertical Condensed Steps
Vertical condensed steps combining both layout options. Ideal for dense sidebar navigation with minimal visual footprint.
Stateless Steps
By default Steps is stateless. This means the host application must handle selection behavior. The component provides a way to opt in to stateful selection behavior where click events and keyboard enter trigger the selection state.
All other examples on this page set behavior-select on the parent steps to opt into stateful behavior. The following example
shows the default stateless behavior, where the host app has to set/remove the selected attribute on child <nve-steps-item>.
Display-only steps without interactive selection behavior. Use for showing progress indicators where external logic controls step navigation.
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.