nb-stepper

This is a stepper component for Vue.js 3+. It supports horizontal and vertical layouts, click/keyboard navigation, and status events (start, in progress, end, finished).

Installation

yarn add @vlalg-nimbus/nb-navigation

npm install @vlalg-nimbus/nb-navigation

Usage

import { createApp } from 'vue'
import App from './App.vue'

import NbNavigationComponents from '@vlalg-nimbus/nb-navigation'
import "@vlalg-nimbus/nb-navigation/dist/style.css";

const app = createApp(App)
app.use(NbNavigationComponents)
app.mount('#app')

import NbNavigationComponents from '@vlalg-nimbus/nb-navigation'
import "@vlalg-nimbus/nb-navigation/dist/style.css";

export default defineNuxtPlugin(context => {
  context.vueApp.use(NbNavigationComponents)
})

To use, simply call the component, in this case it will be NbStepper or nb-stepper.

<template>
  <NbStepper
    nb-id="stepper-1"
    :step="2"
    :steps="4"
    orientation="horizontal"
  />
</template>

<template>
  <div style="height: 300px;">
    <NbStepper
      nb-id="stepper-2"
      :step="2"
      :steps="4"
      orientation="vertical"
    />
  </div>
</template>

Preview & Playground

Select the component you want to edit/test

Props

Items with an (*) mean they are required

Theme Colors (Light)

Neutral gray ramp on a light surface (connector → pending circle → active ring → done/focus → finished).

Theme Colors (Dark)

Same ramp roles as light (connector → pending → active → done/focus → finished). Defaults assume a dark surrounding surface; darkFinishedColor is #000000 for a strong final-state mark (adjust per product skin).

Events

Notes

• In vertical mode, define a height on the parent container to let the stepper fill available space.
• Status behavior:
  • start: first step
  • in progress: between first and last
  • end: at last step
  • finished: after last step (step > steps)