Stepper Nav

Wizard navigation with back/next/skip controls and step validation gates. Steps connected by gradient lines with interactive routing.

Components

Stepper Nav

navigation

interactive

<arc-stepper-nav>

Overview

StepperNav is a full wizard controller that pairs step indicators with built-in navigation buttons — Back, Next, and optional Skip. Unlike the display-only Stepper component, which simply visualises progress, StepperNav owns the routing logic: it tracks the active step, enforces linear or free-form progression, and dispatches events when the user advances, retreats, or completes the flow. Each step is connected by gradient lines that fill as the user progresses, providing a clear visual trail of completed, active, and upcoming stages. The active step pulses with an accent-primary glow, while completed steps show a filled check indicator. When the `linear` prop is set, users cannot jump ahead without completing the current step — ideal for checkout flows or onboarding wizards where order matters. The component dispatches `arc-change` on every step transition and `arc-complete` when the final step is confirmed, so your application can validate inputs, persist state, or redirect the user. StepperNav handles the navigation chrome while leaving step content entirely to your application — render whatever forms, media, or confirmation screens you need for each stage.

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

Do not use StepperNav for display-only progress — use Stepper instead
Do not add more than seven steps — break long flows into grouped stages
Skip validation in linear mode — users expect gated progression
Do not mix StepperNav and Tabs for the same content — pick one navigation paradigm
Do not 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: `
    <arc-stepper-nav
      [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

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

arc-change detail: { step: number }: Fired when the active step changes with detail: { step }.
arc-complete: Fired when the user confirms the final step.

Stepper Nav

Overview

Guidelines

When to use

When not to use

Features

Preview

Usage

API

Events

See Also

Docs

Project

Arclight