Tabs

NbTabs connects triggers and panels by matching value. The tab list supports arrow keys, Home, and End.

Preview

PreviewCode

Copy

<script setup lang="ts">
import { NbTabs, NbTabsList, NbTabsTrigger, NbTabsContent } from '@neobrut-vue/core'
</script>

<template>
  <NbTabs default-value="overview">
    <NbTabsList>
      <NbTabsTrigger value="overview">Overview</NbTabsTrigger>
      <NbTabsTrigger value="details">Details</NbTabsTrigger>
      <NbTabsTrigger value="disabled" disabled>Disabled</NbTabsTrigger>
    </NbTabsList>
    <NbTabsContent value="overview">A quick look at the project.</NbTabsContent>
    <NbTabsContent value="details">Use arrow keys to move between tabs.</NbTabsContent>
    <NbTabsContent value="disabled">You can't open this one.</NbTabsContent>
  </NbTabs>
</template>

Usage

<NbTabs default-value="overview">
  <NbTabsList>
    <NbTabsTrigger value="overview">Overview</NbTabsTrigger>
    <NbTabsTrigger value="details">Details</NbTabsTrigger>
  </NbTabsList>
  <NbTabsContent value="overview">The short version.</NbTabsContent>
  <NbTabsContent value="details">The full story.</NbTabsContent>
</NbTabs>

Use v-model instead of default-value when the parent needs the active tab.