nb-stepper-line

This is a line stepper component for Vue.js 3+.

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 as NbStepperLine or nb-stepper-line.

<template>
  <NbStepperLine
    nb-id="stepper-line-1"
    :step="1"
    :steps="4"
  />
</template>

<template>
  <NbStepperLine
    nb-id="stepper-line-2"
    :step="1"
    :steps="[
      { id: 1, title: 'Step One' },
      { id: 2, title: 'Step Two' },
      { id: 3, title: 'Step Three' }
    ]"
    :steps-disabled="[2]"
    :block-click="false"
    :has-tab-index-enter="true"
    :has-tab-index-space="true"
  />
</template>

Preview & Playground

Select the component you want to edit/test

Props

Items with an (*) mean they are required

Layout / Visibility

Number (counter)

Line

Theme colors (theme="light")

These props apply when theme is light. They replace the old single tabColor / lineBackground props (colors are no longer shared across themes).

Theme colors (theme="dark")

These props apply when theme is dark.

Label

Slots

Per-step slots use the step index (0-based), same pattern as NbSegmentedButton (option-{index}).

Events

Notes

• In array mode (steps as Array), each item can be a string or object.
• For object items, id and title are used when available.
• Disabled steps (stepsDisabled) are not clickable and are skipped by change handlers.
• The step list scrolls horizontally when it overflows (overflow-x on the inner nav); use scrollClass if you need custom scrollbar or overflow styling.
• Colors for numbers and line segments are controlled separately for light and dark via the light* and dark* props above (no single tabColor / lineBackground anymore).