Tabs
Organizes content into separate panels that users can switch between. Makes navigating related sections quick and intuitive.
Orientation
Icons
API Reference
Show types
typescript
import type { Component } from 'vue'
export interface Tab {
/** Text shown for the tab. */
label: string
/**
* Optional icon shown with the label. Pass a `lucide-*` class string for
* the recommended class-based form, or a Vue component for custom icons.
*/
icon?: string | Component
/** Optional route to navigate to when the tab is clicked. */
route?: string
}
export interface TabsProps {
/** Element/component used to render the tab container. */
as?: string
/** List of tabs to render. */
tabs: Tab[]
/** Renders tabs vertically instead of horizontally. */
vertical?: boolean
/** Currently selected tab value. */
modelValue?: string | number
/** Forces layout direction; defaults to `document.documentElement.dir`. */
dir?: 'rtl' | 'ltr'
}
export interface TabsEmits {
/** Fired when the selected tab changes. */
'update:modelValue': [value: string | number]
}| Prop | Default | Type |
|---|---|---|
as | — | string Element/component used to render the tab container. |
tabs* | — | Tab[] List of tabs to render. |
vertical | — | boolean Renders tabs vertically instead of horizontally. |
modelValue | — | string | number Currently selected tab value. |
dir | — | "rtl" | "ltr" Forces layout direction; defaults to `document.documentElement.dir`. |
| Slot | Payload |
|---|---|
tab-item | { tab: { label: string; icon?: string | Component | undefined; route?: string | undefined; }; } Custom renderer for a tab trigger (icon + label / router-link). |
tab-panel | { tab: { label: string; icon?: string | Component | undefined; route?: string | undefined; }; } Content rendered for each tab panel. |
| Event | Payload |
|---|---|
update:modelValue | [value: string | number] Fired when the model value changes. |