WizardNav

Step progress navigation for multi-step processes

Overview

WizardNav displays step progress for multi-step processes like onboarding flows, complex forms, and guided workflows. It shows completed, active, and pending states with optional sub-steps.

Key Features

Step numbers with completion indicators
Active step highlighting with visual prominence
Optional sub-steps for detailed progress tracking
Clickable steps for non-linear navigation (when enabled)
Responsive: sidebar on desktop, progress bar on mobile

Layout Availability

WizardNav is the step navigation module for LayoutWizard. It displays as a sidebar on desktop and a compact progress bar on mobile.

LayoutWizard

Step navigation sidebar

LayoutShell

Not available in this layout

LayoutFocus

Not available in this layout

LayoutCard

Not available in this layout

LayoutBlank

Not available in this layout

Examples

Basic Steps

Simple linear step progression without sub-steps.

With Sub-steps

Steps with sub-step detail for granular progress tracking.

Clickable Navigation

Allow users to jump to completed steps (non-linear navigation).

Review

Current step: 3

Click any completed step to navigate back

Step States

Visual states: completed (check mark), active (highlighted), pending (dimmed).

Start (first step active)

Middle (progress)

End (complete)

Usage

Basic Steps

import { WizardNav, type WizardStep } from '@/ui/layouts';

const steps: WizardStep[] = [
  { label: 'Account Info', completed: true, active: false },
  { label: 'Preferences', completed: false, active: true },
  { label: 'Review', completed: false, active: false },
];

<WizardNav steps={steps} />

With Sub-steps

import { WizardNav, type WizardStep } from '@/ui/layouts';

const steps: WizardStep[] = [
  {
    label: 'Account Info',
    completed: true,
    active: false,
    substeps: [
      { label: 'Personal', completed: true, active: false },
      { label: 'Contact', completed: true, active: false },
    ],
  },
  {
    label: 'Preferences',
    completed: false,
    active: true,
    substeps: [
      { label: 'Notifications', completed: false, active: true },
      { label: 'Privacy', completed: false, active: false },
    ],
  },
  { label: 'Review', completed: false, active: false },
];

<WizardNav steps={steps} />

Clickable Navigation

import { WizardNav, type WizardStep } from '@/ui/layouts';

const steps: WizardStep[] = [
  {
    label: 'Account Info',
    completed: true,
    active: false,
    onClick: () => setCurrentStep(0),
  },
  {
    label: 'Preferences',
    completed: true,
    active: false,
    onClick: () => setCurrentStep(1),
  },
  { label: 'Review', completed: false, active: true },
];

<WizardNav steps={steps} />

import { WizardNav, type WizardStep } from '@/ui/layouts'; const steps: WizardStep[] = [ { label: 'Account Info', completed: true, active: false }, { label: 'Preferences', completed: false, active: true }, { label: 'Review', completed: false, active: false }, ]; <WizardNav steps={steps} />

import { WizardNav, type WizardStep } from '@/ui/layouts'; const steps: WizardStep[] = [ { label: 'Account Info', completed: true, active: false, substeps: [ { label: 'Personal', completed: true, active: false }, { label: 'Contact', completed: true, active: false }, ], }, { label: 'Preferences', completed: false, active: true, substeps: [ { label: 'Notifications', completed: false, active: true }, { label: 'Privacy', completed: false, active: false }, ], }, { label: 'Review', completed: false, active: false }, ]; <WizardNav steps={steps} />

import { WizardNav, type WizardStep } from '@/ui/layouts'; const steps: WizardStep[] = [ { label: 'Account Info', completed: true, active: false, onClick: () => setCurrentStep(0), }, { label: 'Preferences', completed: true, active: false, onClick: () => setCurrentStep(1), }, { label: 'Review', completed: false, active: true }, ]; <WizardNav steps={steps} />