Components / Navigation

Tabs

Switch related views while keeping each panel mounted.

Preview

Overview content

Use cases

Related views

Switch between a project overview, activity, and team information in one place.

Expensive panels

Use manual activation when changing a tab starts costly work.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import Tabs from './components/ui/tabs/Tabs.vue'
import TabsList from './components/ui/tabs/TabsList.vue'
import TabsTrigger from './components/ui/tabs/TabsTrigger.vue'
import TabsContent from './components/ui/tabs/TabsContent.vue'
const view = ref('overview')
</script>

<template>
  <Tabs v-model="view" label="Workspace views">
    <TabsList>
    <TabsTrigger value="overview"><template #icon><OverviewIcon aria-hidden="true" /></template>Overview</TabsTrigger>
      <TabsTrigger value="activity">Activity</TabsTrigger>
    </TabsList>
    <TabsContent value="overview">Overview content</TabsContent>
    <TabsContent value="activity">Activity content</TabsContent>
  </Tabs>
</template>

More examples

Project views

Connect each trigger value to exactly one panel.

Project views

<script setup lang="ts">
import { ref } from 'vue'
import Tabs from './components/ui/tabs/Tabs.vue'
import TabsContent from './components/ui/tabs/TabsContent.vue'
import TabsList from './components/ui/tabs/TabsList.vue'
import TabsTrigger from './components/ui/tabs/TabsTrigger.vue'
const view = ref('overview')
</script>

<template>
  <Tabs v-model="view" label="Project views">
    <TabsList><TabsTrigger value="overview">Overview</TabsTrigger><TabsTrigger value="activity">Activity</TabsTrigger></TabsList>
    <TabsContent value="overview"><p>Project summary</p></TabsContent>
    <TabsContent value="activity"><p>Recent changes</p></TabsContent>
  </Tabs>
</template>

Manual activation

Arrow keys move focus; Enter or Space selects the focused tab.

Manual activation

<script setup lang="ts">
import Tabs from './components/ui/tabs/Tabs.vue'
import TabsContent from './components/ui/tabs/TabsContent.vue'
import TabsList from './components/ui/tabs/TabsList.vue'
import TabsTrigger from './components/ui/tabs/TabsTrigger.vue'
</script>

<template>
  <Tabs label="Report views" activation="manual" orientation="vertical">
    <TabsList><TabsTrigger value="chart">Chart</TabsTrigger><TabsTrigger value="data">Data</TabsTrigger></TabsList>
    <TabsContent value="chart">Chart preview</TabsContent>
    <TabsContent value="data">Data summary</TabsContent>
  </Tabs>
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Tabs
Name	Type	Default or requirement
`items`	{ value; label; disabled? }[]	optional
`label`	string	required
`v-model`	string	first enabled tab
`orientation`	horizontal \| vertical	horizontal
`activation`	automatic \| manual	automatic

Arrow keys move between tabs. Manual activation selects with Enter or Space.

Implementation notes

Use tabs for peer views of the same subject; use navigation links for separate pages.
Keep trigger values unique and paired with matching content values.

Accessibility and localization

The label names the tab set; arrow keys move focus and manual activation requires Enter or Space.