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
LayoutForm
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} />