Accordion

NbAccordion groups NbAccordionItem sections. Each item has a unique value and a visible title.

Preview

Open the headings below. default-value opens an item initially; use v-model to control the open item yourself.

PreviewCode

Copy

<script setup lang="ts">
import { NbAccordion, NbAccordionItem } from '@neobrut-vue/core'
</script>

<template>
  <div class="demo-stack">
    <NbAccordion default-value="first">
      <NbAccordionItem value="first" title="Can I use this in Vue 3?">
        Yes. Install the core package and import the stylesheet once.
      </NbAccordionItem>
      <NbAccordionItem value="second" title="Does it work without SSR?">
        Yes. The components run in a client-side Vue app.
      </NbAccordionItem>
      <NbAccordionItem value="third" title="Can I use the keyboard?">
        Yes. Press Tab to focus a heading, then Enter or Space to toggle it.
      </NbAccordionItem>
    </NbAccordion>
  </div>
</template>

<style scoped>
.demo-stack { max-width: 36rem; }
</style>

Usage

<NbAccordion default-value="first">
  <NbAccordionItem value="first" title="First question">Answer.</NbAccordionItem>
  <NbAccordionItem value="second" title="Second question">Another answer.</NbAccordionItem>
</NbAccordion>