XDS — Design System

XDSTabMenu@xds/core · TabList

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.

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.

Anatomy

Element		Description
Left Content		Most important area; hugs content width.
Center-Fill Content		Stretches to fill available space.
Right Content		Hugs content width.

Import

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

Props

Prop	Type	Description
labelrequired	string	Label for the trigger button (shown when no option is selected) and the dropdown heading divider.
optionsrequired	XDSTabMenuOption[]	Array of menu options rendered in the dropdown.

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>
  );
}