nb-accordion

This is an accordion component for Vue.js 3+.

It is a thin wrapper around NbCollapse that renders a list of collapsible panels from an items array, with optional control of which panels are open (selecteds) and which are disabled (disableds).

It exposes per-item slots so each panel can have a fully custom title, icon and content while keeping the styling props centralized at the accordion level.

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 NbAccordion or nb-accordion.

<template>
  <NbAccordion
    nb-id="accordion-1"
    :items="items"
  />
</template>

<script setup>
import { ref } from 'vue'

const items = ref([
  { key: 'item-1', label: 'Section 1', content: 'Content of section 1' },
  { key: 'item-2', label: 'Section 2', content: 'Content of section 2' },
  { key: 'item-3', label: 'Section 3', content: 'Content of section 3' }
])
</script>

<template>
  <NbAccordion nb-id="accordion-2" :items="items">
    <template #title-0="{ item, isActive }">
      <strong>{{ item.label }} {{ isActive ? '(open)' : '' }}</strong>
    </template>

    <template #content-1="{ item }">
      <ul>
        <li v-for="row in item.rows" :key="row">{{ row }}</li>
      </ul>
    </template>
  </NbAccordion>
</template>

<template>
  <NbAccordion
    nb-id="accordion-3"
    :items="items"
    :selecteds="[0, 2]"
    :disableds="[1]"
  />
</template>

Preview & Playground

Select the component you want to edit/test

items shape

Each entry in the items array must be an object with at least:

Extra properties are allowed and are exposed back through the slot props as item.

Props

Items with an (*) mean they are required

Core

Title

Content

Theme Colors (Light)

Default palette uses Tailwind-like neutral grays with blue as the active accent. Designed for light surfaces.

Theme Colors (Dark)

Same color roles as light, tuned for dark surfaces.

Slots

Slots are exposed per item using the index from the items array. Each slot receives the full item, its index, and the current state flags so you can adapt the rendering individually.

The default rendering uses item.label for the title, + / − for the icon, and item.content wrapped in a <p> for the body.

Events

The accordion forwards the events emitted by each internal NbCollapse. The order of the events follows the user's interaction with the corresponding panel.

Notes

• The key of each item is required for the prop validator, but the per-item DOM id uses the index (accordion-{nbId}-{index}) to guarantee uniqueness.
• selecteds and disableds are arrays of indexes (numbers), not item keys.
• This component is purely presentational over NbCollapse. To open/close panels programmatically, mutate selecteds from the parent.
• All styling props are forwarded to every panel; if you need different styling per item, render multiple NbCollapse instances directly instead of using NbAccordion.