TabsNav

Standalone tab switcher — the role="tablist" row of buttons driven by a tabs array and v-model (whose value is the active tab's key). Used internally by Tabs, but can be used on its own to control tab state without the panels.

Import

import { TabsNav } from 'vuiii'
import type { Tab } from 'vuiii'

Basic Usage

View in Storybook

import { TabsNav } from 'vuiii'
import type { Tab } from 'vuiii'

const active = ref('profile')

const tabs: Tab[] = [
  { key: 'profile', label: 'Profile' },
  { key: 'messages', label: 'Messages' },
  { key: 'settings', label: 'Settings', icon: 'cog' },
]

<TabsNav v-model="active" :tabs="tabs" />

Props

Prop	Type	Default	Description
tabs	Tab[]	-	List of tab descriptors (see the Tab type below)
idBase	string	generated id	Shared id base for linking tabs to their panels. Defaults to a generated id
v-model	string	first enabled tab	The active tab's key

The Tab type

type Tab = {
  key: string       // v-model value / slot key
  label: string     // text shown in the tab button
  icon?: string     // optional icon name
  disabled?: boolean
}

Slots

Slot	Slot Props	Description
label:{key}	{ tab, active }	Custom content for a tab button (replaces the default)

Events

The TabsNav component has no custom events — use v-model to react to the active tab changing.

More Examples

Custom Tab Label

<TabsNav v-model="active" :tabs="tabs">
  <template #label:settings="{ active }">
    <Icon name="cog" /> Settings <Badge>3</Badge>
  </template>
</TabsNav>

Keyboard

Selection follows focus within the tablist:

Key	Action
ArrowRight / ArrowDown	Move to the next enabled tab
ArrowLeft / ArrowUp	Move to the previous enabled tab
Home	Jump to the first enabled tab
End	Jump to the last enabled tab

Disabled tabs are skipped during keyboard navigation.

Storybook

For interactive examples, see TabsNav in Storybook.