Installation
Usage
import { NavStepper, NavStepData } from "@/components/ruixen/nav-stepper";const steps: NavStepData[] = [
{ id: 1, label: "Details" },
{ id: 2, label: "Address" },
{ id: 3, label: "Payment" },
{ id: 4, label: "Review" },
];
<NavStepper
steps={steps}
currentStep={1}
onStepChange={setStep}
variant="numbered"
/>;Examples
Numbered with Inline Arrows
<NavStepper
steps={steps}
currentStep={1}
variant="numbered"
navPosition="inline"
/>Dot Indicators
<NavStepper steps={steps} currentStep={2} variant="dots" navPosition="inline" />Bar Indicators
<NavStepper steps={steps} currentStep={1} variant="bars" navPosition="inline" />Bottom Navigation
<NavStepper
steps={steps}
currentStep={2}
variant="numbered"
navPosition="bottom"
/>With Loading State
<NavStepper steps={steps} currentStep={1} loading={isLoading} />Without Navigation Buttons
<NavStepper steps={steps} currentStep={1} showNavButtons={false} />Props
NavStepper
| Prop | Type | Default | Description |
|---|---|---|---|
steps | NavStepData[] | Required | Array of step definitions |
defaultStep | number | 0 | Default step index |
currentStep | number | - | Controlled step index |
onStepChange | (step: number) => void | - | Callback when step changes |
loading | boolean | false | Show loading state |
showNavButtons | boolean | true | Show prev/next buttons |
navPosition | "inline" | "bottom" | "inline" | Navigation button position |
variant | "numbered" | "dots" | "bars" | "numbered" | Indicator style variant |
NavStepData
| Property | Type | Description |
|---|---|---|
id | string | number | Unique identifier |
label | string | Step label |
Hooks
useNavStepper
Access navigation context from child components.
const {
currentStep,
totalSteps,
goToStep,
goNext,
goPrev,
canGoNext,
canGoPrev,
isLoading,
} = useNavStepper();