ITabs ​

Switches between panels on the same page. Items come from an array, and the indicator animates between triggers.

<ITabs v-model="tab" :items="['Overview', 'Line items', 'History']" />

A string item becomes both the label and the value. Pass objects when the two differ, or when an item needs an icon or should be disabled.

Variants ​

solid sits the active tab on a filled pill; line underlines it, which suits tabs sitting directly above the content they switch.

<ITabs v-model="tab" :items="items" variant="solid" />
<ITabs v-model="tab" :items="items" variant="line" />

Panels ​

Give each item a value and fill the matching named slot. Each slot receives the item it belongs to.

<script setup lang="ts">
const items = [
  { label: 'Overview', value: 'overview' },
  { label: 'Line items', value: 'items' },
  { label: 'History', value: 'history' },
]
</script>

<template>
  <ITabs v-model="tab" :items="items">
    <template #overview>
      <p>Four line items totalling €1,240.00.</p>
    </template>
    <template #items="{ item }">
      <p>Panel for {{ item.label }}.</p>
    </template>
  </ITabs>
</template>

Many tabs ​

When the tabs don't fit, the list scrolls sideways. The scrollbar is hidden, the tabs fade at whichever edge has more past it (the background stays put), and the selected tab is always scrolled fully into view, including on load.

<ITabs v-model="tab" :items="['Overview', 'Invoices', 'Payments', 'Customers', 'Products', 'Reports', 'Taxes', 'Settings']" class="max-w-sm" />

Vertical ​

orientation="vertical" stacks the triggers down the side, and arrow-key navigation follows the orientation.

<ITabs v-model="tab" :items="['Profile', 'Billing', 'Members']" orientation="vertical" variant="line">
  <template #Profile>
    Name, photo and the email invoices are sent from.
  </template>
  <template #Billing>
    Plan, payment method and past receipts.
  </template>
  <template #Members>
    Who can see and edit this workspace.
  </template>
</ITabs>

Keeping panels mounted ​

By default only the active panel is in the DOM. keepMounted renders them all and hides the inactive ones, which keeps form state, scroll position and anything expensive to rebuild.

<ITabs v-model="tab" :items="items" keep-mounted />

Props ​

The model is the active item's value, falling back to its label.

interface TabsItem {
  label: string
  /** Identifies the tab. Defaults to the label. */
  value?: string
  icon?: IconLike
  disabled?: boolean
}

Slots ​

For switching between pages rather than panels, use INavigationMenu or plain links.