Step Navigation

Step Navigation guides users through a workflow.

Step Navigation

Active Step Inactive Step Completed Step Completed & Active Step Disabled Step
<tk-step-navigation>
  <tk-step-item active>Active Step</tk-step-item>
  <tk-step-item>Inactive Step</tk-step-item>
  <tk-step-item complete>Completed Step</tk-step-item>
  <tk-step-item complete active>Completed & Active Step</tk-step-item>
  <tk-step-item disabled>Disabled Step</tk-step-item>
</tk-step-navigation>

Description

Step Navigation is used where you want to break up a workflow and guide the user through a process in order.

Checkmark mode

Step ONE Step 2 Step 3
<tk-step-navigation checkmark>
  <tk-step-item complete>Step ONE</tk-step-item>
  <tk-step-item>Step 2</tk-step-item>
  <tk-step-item disabled>Step 3</tk-step-item>
</tk-step-navigation>

Props

Property Default Description
active false Sets the active state of the step. Will default to first item if no steps are set.
checkmark false The stepper will display a checkmark in place of the step number.
complete false Mark the step as completed.
disabled false Disables the step.