---
id: step-nav
title: StepNav
---

# StepNav

StepNav is a component that displays number of steps required to complete a process inside your application.

## How to use

<code src="@digigov/ui/src/content/StepNav/__stories__/Default.tsx" />

### With hints

<code src="@digigov/ui/src/content/StepNav/__stories__/WithHints.tsx" />

### With dense style

<code src="@digigov/ui/src/content/StepNav/__stories__/Dense.tsx" />

## API

See below for a complete reference to all of the props  available to the components mentioned here.

<ComponentProps componentName={
  [
    "StepNav",
    "StepNavControls", 
    "StepNavList",
    "StepNavListItem",
    "StepNavAccordion",
    "StepNavAccordionSummary",
    "StepNavAccordionSummaryHeading",
    "StepNavCircleNumber",
    "StepNavAccordionHeadingTitle",
    "StepNavAccordionHeadingText",
    "StepNavAccordionContent"
  ]} />