Prepared Docs

TabMenu wraps Tabs, TabsList, and TabsTrigger for selection that updates local state only—filters, view switchers, and panels without routing. Use TabMenuItem children; each needs a stable value. Optional counter, leadIcon, and iconTitle match TabsTrigger capabilities.

TabMenu

Name	Type	Default	Description
`defaultValue`	`string`	—	The default value when uncontrolled
`onValueChange`	`((value: string) => void)`	—	Callback when selection changes
`showUnderline`	`boolean`	`true`	whether to show the border beneath the tab menu
`slidingAnimation`	`boolean`	`false`	whether to enable the sliding animation for the active tab indicator
`small`	`boolean`	—	whether the tabs should be small
`value`	`string`	—	The controlled value of the selected tab

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Controlled

Without Underline

With Sliding Animation

Small

With Counters

With Counters And Small

All Variants

Test Tab Menu Basic

Test Tab Menu Controlled

Test Tab Menu Small

Test Tab Menu Without Underline

Test Tab Menu Sliding Animation

Test Tab Menu With Counters

Test Tab Menu With Counters And Small

TabMenuItem

Name	Type	Default	Description
`value`	`string`	`required`	Id matching Tabs content if used.
`counter`	`number \| string`	`—`	Badge when > 0.
`leadIcon`	`SVGAsset`	`—`	Icon before label.
`iconTitle`	`string`	`—`	Accessible name for lead icon.

Default (uncontrolled)

Controlled

Fixed selection (controlled value)

Without underline

Sliding animation

Small

With counters

Small with counters

Picking the right component

Scenario	Component	Why
Filter or view-switch without URL change	TabMenu	Selection state only—no content panels, no routing.
Switch between content panels on one page	Tabs	Manages visibility of `TabsContent` panels.
Navigate to different routes (URL changes)	TabNav	Renders `<a>` links with SPA navigation and pathname matching.

Tab Menu / Usage

Tab Menu / Accessibility

TabMenu

Storybook

TabMenuItem

Default (uncontrolled)

Controlled

Fixed selection (controlled value)

Picking the right component

View Source

Submit Issue

TabMenu

Name	Type	Default	Description
`defaultValue`	`string`	—	The default value when uncontrolled
`onValueChange`	`((value: string) => void)`	—	Callback when selection changes
`showUnderline`	`boolean`	`true`	whether to show the border beneath the tab menu
`slidingAnimation`	`boolean`	`false`	whether to enable the sliding animation for the active tab indicator
`small`	`boolean`	—	whether the tabs should be small
`value`	`string`	—	The controlled value of the selected tab

Storybook

Interactive examples and edge cases for this component are in Storybook.

Default

Controlled

Without Underline

With Sliding Animation

Small

With Counters

With Counters And Small

All Variants

Test Tab Menu Basic

Test Tab Menu Controlled

Test Tab Menu Small

Test Tab Menu Without Underline

Test Tab Menu Sliding Animation

Test Tab Menu With Counters

Test Tab Menu With Counters And Small

TabMenuItem

Name	Type	Default	Description
`value`	`string`	`required`	Id matching Tabs content if used.
`counter`	`number \| string`	`—`	Badge when > 0.
`leadIcon`	`SVGAsset`	`—`	Icon before label.
`iconTitle`	`string`	`—`	Accessible name for lead icon.

Default (uncontrolled)

Controlled

Fixed selection (controlled value)

Without underline

Sliding animation

Small

With counters

Small with counters

Picking the right component

Scenario	Component	Why
Filter or view-switch without URL change	TabMenu	Selection state only—no content panels, no routing.
Switch between content panels on one page	Tabs	Manages visibility of `TabsContent` panels.
Navigate to different routes (URL changes)	TabNav	Renders `<a>` links with SPA navigation and pathname matching.