BundyUI

Navigation

Tabs

A set of panels shown one at a time, switched via a row of tab triggers.

html
<UiTabs :items="..." />

Items

required

items is the tab strip: each entry is a label, optionally an icon, its own panel content, and a disabled flag. A tab with no content still switches — useful when you're rendering the panel yourself from v-model.

Manage your account settings and preferences here.

Model value

modelValue is the active tab's value. Bind it with v-model to drive the tabs from outside — restoring a tab from the URL, or moving to the next one when a step completes.

Default value

defaultValue is the tab open on first render while the component still owns its own state. Point it at the tab that answers the most common question, not simply the first one in the list.

Variant

variant sets how the tab list is drawn. subtle, the default, puts a filled pill behind the active tab; outline rings it instead; link drops the surface entirely and marks the active tab with an underline, which suits a page-level header where a pill would read as a control.

Manage your account settings and preferences here.

Size

size sets how large the triggers render.

sm
md (default)
lg

Orientation

orientation lays the triggers down the side instead of across the top, with the panel beside them.

horizontal (default)
vertical

orientation="vertical" changes layout but not behavior — the same items shape works for both orientations.

Content

content renders the panel below the strip. Set it to false and only the triggers are drawn — for when the tabs switch something elsewhere on the page rather than a panel of their own.

Manage your account settings and preferences here.

Unmount on hide

unmountOnHide is on by default, so a hidden panel is removed from the DOM and re-renders fresh next time. Set it to false to keep every panel mounted — scroll position, a half-filled form, an unsaved draft all survive switching away and back.

`variant="outline"`

Ringed panel around the whole tab strip.

Manage your account settings and preferences here.

:content="false" hides the panel area entirely, useful when you only want the tab strip (e.g. driving external content) instead of the built-in panel switcher.

Without `icon`

API Reference

Generated from the component's source — props, slots and emits as the component actually declares them.

Props

Prop
Type
Default
Description
itemsrequired
TabsItem[]
—
The tabs to display, each with a label, optional icon, content, value, and disabled state.
modelValue
string | number
—
Controls the active tab. Omit this to let the tabs manage their own state internally (starting from `defaultValue`); pass it to fully control the active tab yourself.
defaultValue
string | number
the first item
Which tab is active first when uncontrolled.
variant
"subtle" | "outline" | "link"
'subtle'
The visual style of the tab list.
size
"sm" | "md" | "lg"
'md'
The size of the tab triggers.
orientation
"horizontal" | "vertical"
'horizontal'
The layout direction of the tab list.
content
boolean
true
Renders the tab content panel below the tab list.
unmountOnHide
boolean
true
Removes inactive tab panels from the DOM instead of just hiding them.

Slots

Slot
item.slot ?? 'content'

Emits

Event
Payload
Description
update:modelValue
[value: string | number]
—

Types

ts
interface TabsItem {
    label: string;
    icon?: string;
    content?: string;
    value?: string | number;
    disabled?: boolean;
    slot?: string;
}