Skip to content
Layout

TabList

Horizontal tab strip with TabList.Tab items.

React source Core source

TabList

Nav landmark tabs for switching views or routes — no panels. Compose TabList.Tab rows and an optional TabList.Menu overflow trigger. Controlled via value / onChange.

Examples

Default

A short strip of selected and unselected tabs.

Demo.tsxtsx
import { TabList } from '@var-ui/react';

<TabList value={tab} onChange={setTab} label="Sections">
  <TabList.Tab value="overview" label="Overview" />
  <TabList.Tab value="activity" label="Activity" />
</TabList>

Overflow menu

Keep primary tabs visible and tuck the rest into TabList.Menu — selecting an option updates the same controlled value.

Demo.tsxtsx
import { TabList } from '@var-ui/react';

<TabList value={tab} onChange={setTab} label="Sections">
  <TabList.Tab value="overview" label="Overview" />
  <TabList.Tab value="activity" label="Activity" />
  <TabList.Tab value="members" label="Members" />
  <TabList.Menu
    label="More"
    options={[
      { value: 'settings', label: 'Settings' },
      { value: 'billing', label: 'Billing' },
      { value: 'audit', label: 'Audit log' },
    ]}
  />
</TabList>

Props

Accessibility

The root is a nav landmark (label defaults to "Tabs"). Tabs are plain buttons or links with roving tabindex (Arrow / Home / End); link tabs set aria-current="page" when selected. TabList.Menu options join the same value set for keyboard focus order.