<arc-stepper-nav> Overview
Guidelines
When to use
- Use linear mode for checkout, onboarding, or any flow where step order matters
- Provide clear, concise labels for each step — two to three words maximum
- Validate the current step before allowing Next to proceed
- Listen for arc-complete to redirect or show a confirmation screen
- Keep the total number of steps between three and six for best usability
When not to use
- Use StepperNav for display-only progress — use Stepper instead
- Add more than seven steps — break long flows into grouped stages
- Skip validation in linear mode — users expect gated progression
- Mix StepperNav and Tabs for the same content — pick one navigation paradigm
- Nest StepperNav inside another StepperNav
Features
- Built-in Back, Next, and Skip navigation buttons
- Linear mode enforces sequential step completion
- Gradient connector lines fill as steps are completed
- Active step with accent-primary glow indicator
- Completed steps show filled check marks
- arc-change event on every step transition
- arc-complete event when the wizard finishes
- Keyboard accessible navigation controls
- Configurable step labels via the steps array
- Token-driven theming via CSS custom properties
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.
<script type="module" src="@arclux/arc-ui"></script>
<arc-stepper-nav
steps='["Account", "Profile", "Confirm"]'
active="0"
linear
id="wizard"
></arc-stepper-nav>
<script>
const wizard = document.querySelector('#wizard');
wizard.addEventListener('arc-change', (e) => {
console.log('step:', e.detail.step);
});
wizard.addEventListener('arc-complete', () => {
console.log('wizard complete');
});
</script>import { StepperNav } from '@arclux/arc-ui-react';
export function OnboardingWizard() {
return (
<StepperNav
steps={['Account', 'Profile', 'Confirm']}
active={0}
linear
onArcChange={(e) => console.log('step:', e.detail.step)}
onArcComplete={() => console.log('wizard complete')}
/>
);
}<script setup>
import { StepperNav } from '@arclux/arc-ui-vue';
const steps = ['Account', 'Profile', 'Confirm'];
function onChange(e) {
console.log('step:', e.detail.step);
}
function onComplete() {
console.log('wizard complete');
}
</script>
<template>
<StepperNav
:steps="steps"
:active="0"
linear
@arc-change="onChange"
@arc-complete="onComplete"
/>
</template><script>
import { StepperNav } from '@arclux/arc-ui-svelte';
const steps = ['Account', 'Profile', 'Confirm'];
</script>
<StepperNav
{steps}
active={0}
linear
on:arc-change={(e) => console.log('step:', e.detail.step)}
on:arc-complete={() => console.log('wizard complete')}
/>import { Component } from '@angular/core';
import { StepperNav } from '@arclux/arc-ui-angular';
@Component({
imports: [StepperNav],
template: `
<StepperNav
[steps]="steps"
[active]="0"
linear
(arc-change)="onChange($event)"
(arc-complete)="onComplete()"
/>
`,
})
export class OnboardingWizardComponent {
steps = ['Account', 'Profile', 'Confirm'];
onChange(e: CustomEvent) {
console.log('step:', e.detail.step);
}
onComplete() {
console.log('wizard complete');
}
}import { StepperNav } from '@arclux/arc-ui-solid';
export function OnboardingWizard() {
return (
<StepperNav
steps={['Account', 'Profile', 'Confirm']}
active={0}
linear
onArcChange={(e) => console.log('step:', e.detail.step)}
onArcComplete={() => console.log('wizard complete')}
/>
);
}import { StepperNav } from '@arclux/arc-ui-preact';
export function OnboardingWizard() {
return (
<StepperNav
steps={['Account', 'Profile', 'Confirm']}
active={0}
linear
onArcChange={(e) => console.log('step:', e.detail.step)}
onArcComplete={() => console.log('wizard complete')}
/>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
steps | Array<string> | [] | Array of step labels displayed along the progress track. |
active | number | 0 | Zero-based index of the currently active step. |
linear | boolean | false | When true, prevents jumping to future steps — the user must complete each step sequentially. |
Events
| Event | Description |
|---|---|
arc-change | Fired when the active step changes with detail: { step }. |
arc-complete | Fired when the user confirms the final step. |