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.