XDS — Design System

TabMenu@xds/core · XDSTabMenu v0.0.13

Usage

TabList provides tab-style navigation for organizing content into categorized sections. Use it to let users switch between related views without leaving the page, with overflow items handled by a built-in "more" menu.

ts
import {XDSTabMenu} from '@xds/core/TabList'

Best practices

Guidance	Practices
Do	Keep tab labels short and descriptive so users can quickly scan available sections.
Do	Use XDSTabMenu to group overflow items when horizontal space is limited rather than scrolling tabs off-screen.
Do	When using hasDivider with action buttons alongside tabs, use a smaller button size (sm) so the actions don’t overpower the tab row.
Don't	Use tabs for sequential steps or workflows — use a stepper or wizard pattern instead.
Don't	Place more than 6–8 visible tabs before the overflow menu — prioritize the most important categories.
Don't	Confuse TabList with XDSSegmentedControl or XDSToggleButton. TabList is for navigation between views. SegmentedControl and ToggleButton are input controls — SegmentedControl always has exactly one selected option, while ToggleButton can be toggled on or off.

Showcase source

tsx
'use client';
import {XDSTabList, XDSTab, XDSTabMenu} from '@xds/core/TabList';
export default function TabMenuShowcase() {
  return (
    <XDSTabList value="settings" onChange={() => {}}>
      <XDSTab value="overview" label="Overview" />
      <XDSTab value="activity" label="Activity" />
      <XDSTabMenu
        label="More"
        options={[
          {value: 'settings', label: 'Settings'},
          {value: 'integrations', label: 'Integrations'},
          {value: 'billing', label: 'Billing'},
        ]}
      />
    </XDSTabList>
  );
}