N Tabs

Naive UI Tabs Component

Switch contents in same area. Organize content into separate tabbed panels.

When to Use

Use this component when:

• Content organization: Group related content into tabs
• Form sections: Separate form fields into logical groups
• Settings panels: Organize settings into categories
• Dashboard views: Switch between different data views

When to Invoke

Invoke this skill when:

• User needs to implement tabbed interfaces
• User wants to switch between content panels
• User needs addable or closable tabs
• User wants to customize tab appearance
• User asks about tab navigation or switching

Features

• Multiple Types: Bar, line, card, and segment types
• Addable/Closable: Add and remove tabs dynamically
• Animated Transitions: Smooth tab switching animations
• Placement Options: Top, bottom, left, right placement
• Trigger Modes: Click or hover to activate
• Before Leave Hook: Intercept tab switching
• Display Directives: Control content rendering behavior

API Reference

Tabs Props

TabPane Props

Tab Props

Tabs Slots

TabPane Slots

Tabs Methods

Basic Usage

Basic Tabs

<template>
  <n-tabs type="line" animated>
    <n-tab-pane name="oasis" tab="Oasis">
      Wonderwall
    </n-tab-pane>
    <n-tab-pane name="the beatles" tab="the Beatles">
      Hey Jude
    </n-tab-pane>
    <n-tab-pane name="jay chou" tab="Jay Chou">
      Qilixiang
    </n-tab-pane>
  </n-tabs>
</template>

Segment Type

<template>
  <n-tabs type="segment" animated>
    <n-tab-pane name="oasis" tab="Oasis">
      Wonderwall
    </n-tab-pane>
    <n-tab-pane name="the beatles" tab="the Beatles">
      Hey Jude
    </n-tab-pane>
    <n-tab-pane name="jay chou" tab="Jay Chou">
      Qilixiang
    </n-tab-pane>
  </n-tabs>
</template>

Card Type with Closable

<template>
  <n-tabs
    v-model:value="name"
    type="card"
    closable
    tab-style="min-width: 80px;"
    @close="handleClose"
  >
    <n-tab-pane
      v-for="panel in panels"
      :key="panel"
      :tab="panel.toString()"
      :name="panel"
    >
      {{ panel }}
    </n-tab-pane>
  </n-tabs>
</template>

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

const name = ref(1)
const panels = ref([1, 2, 3, 4])

const handleClose = (name) => {
  const index = panels.value.indexOf(name)
  if (index > -1) {
    panels.value.splice(index, 1)
  }
}
</script>

Common Patterns

Addable Tabs

<template>
  <n-tabs
    v-model:value="value"
    type="card"
    :addable="addable"
    :closable="closable"
    tab-style="min-width: 80px;"
    @close="handleClose"
    @add="handleAdd"
  >
    <n-tab-pane v-for="panel in panels" :key="panel" :name="panel">
      {{ panel }}
    </n-tab-pane>
  </n-tabs>
</template>

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

const value = ref(1)
const panels = ref([1, 2, 3])
const addable = ref(true)
const closable = ref(true)

const handleAdd = () => {
  const newPanel = Math.max(...panels.value) + 1
  panels.value.push(newPanel)
  value.value = newPanel
}

const handleClose = (name) => {
  const index = panels.value.indexOf(name)
  if (index > -1) {
    panels.value.splice(index, 1)
  }
}
</script>

Before Leave Hook

<template>
  <n-tabs
    type="line"
    default-value="okay"
    @before-leave="handleBeforeLeave"
    @update:value="handleUpdateValue"
  >
    <n-tab-pane name="wait" tab="Wait for 1s">
      +1s
    </n-tab-pane>
    <n-tab-pane name="not-allowed" tab="Not allowed">
      ???
    </n-tab-pane>
    <n-tab-pane name="okay" tab="Okay">
      Just so so
    </n-tab-pane>
  </n-tabs>
</template>

<script setup>
const handleBeforeLeave = async (activeName, oldActiveName) => {
  if (activeName === 'not-allowed') {
    return false
  }
  if (activeName === 'wait') {
    await new Promise(resolve => setTimeout(resolve, 1000))
  }
  return true
}

const handleUpdateValue = (value) => {
  console.log('Tab changed to:', value)
}
</script>

Prefix and Suffix

<template>
  <n-tabs default-value="oasis">
    <template #prefix>
      Prefix
    </template>
    <n-tab-pane name="oasis" tab="Oasis">
      Wonderwall
    </n-tab-pane>
    <n-tab-pane name="the beatles" tab="the Beatles">
      Hey Jude
    </n-tab-pane>
    <template #suffix>
      Suffix
    </template>
  </n-tabs>
</template>

Tabs Without Pane

<template>
  <n-tabs type="line">
    <n-tab name="Riders On the Storm">
      Riders On the Storm
    </n-tab>
    <n-tab name="Light My Fire">
      Light My Fire
    </n-tab>
    <n-tab name="Break On Through">
      Break On Through
    </n-tab>
  </n-tabs>
</template>

Placement Options

<template>
  <n-tabs
    :type="type"
    animated
    :placement="placement"
    :style="placement === 'left' || placement === 'right' ? { height: '240px' } : undefined"
  >
    <n-tab-pane name="oasis" tab="Oasis">
      Wonderwall
    </n-tab-pane>
    <n-tab-pane name="the beatles" tab="the Beatles">
      Hey Jude
    </n-tab-pane>
    <n-tab-pane name="jay chou" tab="Jay Chou">
      Qilixiang
    </n-tab-pane>
  </n-tabs>
</template>

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

const type = ref('line')
const placement = ref('top')
</script>

Display Directive

<template>
  <n-tabs default-value="show">
    <n-tab-pane name="show" display-directive="show" tab="show">
      Content preserved when switching
    </n-tab-pane>
    <n-tab-pane name="if" display-directive="if" tab="if">
      Content reset when switching
    </n-tab-pane>
    <n-tab-pane name="show:lazy" display-directive="show:lazy" tab="show:lazy">
      Lazy loaded and preserved
    </n-tab-pane>
  </n-tabs>
</template>

Hover Trigger

<template>
  <n-tabs type="line" trigger="hover">
    <n-tab-pane name="oasis" tab="Oasis">
      Wonderwall
    </n-tab-pane>
    <n-tab-pane name="the beatles" tab="the Beatles">
      Hey Jude
    </n-tab-pane>
    <n-tab-pane name="jay chou" tab="Jay Chou">
      Qilixiang
    </n-tab-pane>
  </n-tabs>
</template>

Best Practices

1. Use appropriate type: Choose tab type based on context - card for editable, segment for toggle groups

2. Set default-value: Always set default-value to avoid Vue slot warnings

3. Use display-directive wisely: Use show to preserve state, if for fresh content

4. Implement before-leave: Validate form data before allowing tab switch

5. Animated transitions: Enable animated for better UX

6. Limit tab count: Keep tabs manageable, use scrolling or dropdowns for many tabs