nb-segmented-button

This is a Segmented control 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)
})

Use the component as NbSegmentedButton or nb-segmented-button.

<template>
  <NbSegmentedButton
    nb-id="segmented-1"
    :options="['Browser', 'Network', 'Security']"
    :selected="1"
  />
</template>

<template>
  <NbSegmentedButton
    nb-id="segmented-2"
    :options="['A', 'B', 'C', 'D']"
    :selected="0"
    has-scroll
    has-selected-animation
    theme="light"
  />
</template>

<template>
  <NbSegmentedButton
    nb-id="segmented-3"
    :options="['Alpha', 'Beta', 'Gamma']"
    :selected="0"
  >
    <template #option-0="{ option }">
      <span class="emoji">🔍 {{ option }}</span>
    </template>
    <template #option-1="{ option, index }">
      {{ index }} — {{ option }}
    </template>
  </NbSegmentedButton>
</template>

Preview & Playground

Select the component you want to edit/test

Props

Items with an (*) are required

Theme colors (light)

Theme colors (dark)

Slots

Named slots follow the pattern option-{index} (0-based), one slot name per segment — for example option-0, option-1, option-2.

Events

Notes

• options must be an array of strings; each entry is rendered as one segment (default) or replaced per index via option-{index} slots.
• Use v-model-style updates from the parent: pass :selected and listen to @clicked (or watch your own state) to update the bound index.
• With hasScroll, segments stay on one row (nowrap); narrow viewports scroll horizontally. Dragging with the mouse pans the scroll position; clicks after a drag beyond a small threshold are ignored so you do not accidentally change selection while scrolling.
• With hasSelectedAnimation, the highlight is a separate layer; ResizeObserver / resize keep it aligned when the layout changes.
• The current styles target the filled / background look. Register globally with the nb-navigation plugin, or import NbSegmentedButton from @vlalg-nimbus/nb-navigation if your build re-exports the package components.