nb-collapse

This is a collapsible component for Vue.js 3+.

This component is also the primitive used internally by NbAccordion.

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 NbCollapse or nb-collapse.

<template>
  <NbCollapse
    nb-id="collapse-1"
    title="Open Collapsible"
  >
    <template #content>
      <p>Collapsible content here.</p>
    </template>
  </NbCollapse>
</template>

<template>
  <NbCollapse nb-id="collapse-2" theme="dark">
    <template #title="{ title, isActive }">
      <strong :class="{ active: isActive }">{{ title }}</strong>
    </template>

    <template #title-icon="{ isActive }">
      <i :class="isActive ? 'icon-up' : 'icon-down'" />
    </template>

    <template #content>
      <p>Custom content...</p>
    </template>
  </NbCollapse>
</template>

<template>
  <NbCollapse
    nb-id="collapse-3"
    :opened="isOpen"
    @clicked="isOpen = !isOpen"
  >
    <template #content><p>Controlled by parent.</p></template>
  </NbCollapse>
</template>

<script setup>
import { ref } from 'vue'
const isOpen = ref(false)
</script>

Preview & Playground

Select the component you want to edit/test

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

All slots receive title, is-active and disabled as slot props so the consumer can adapt the rendering based on the current state.

Events

Notes

• opened is a one-way input: emitting clicked and updating it from the parent gives you full control of the state.
• For accessibility, use the ariaAttrs prop to pass extras like controls or expanded when needed.
• Use blockRightClick to prevent the native context menu (e.g. inside a custom right-click flow).
• The *Color, *BgColor and *BorderColor props accept any valid CSS color (hex, rgb, hsl, named, etc.).