Tab Menu
Last Updated: September 2026Tab menus switch between peer destinations or views in a page section, with filled or underlined styles.
Source CodeAnatomy
link- 1Active item
- 2Icon
- 3Label
- 4Disabled item
Variants
linkFilled
Default pill highlight on the active item (variant="filled").
Underlined
Underline indicator for quieter page tabs.
With icons
Leading icons via the icon prop on each item.
Disabled item
Mark unavailable destinations with disabled.
Sizes
linkTab menus support 2 sizes: S and M.
Usage Guidelines
linkWhen to use
- •To switch between peer destinations or views in a page section.
- •When filled or underlined styles match the local navigation hierarchy.
- •For short sets of destinations that stay visible in one row.
When not to use
- •For exclusive filter modes in a toolbar — use Segmented Control.
- •For app-wide destinations — use Sidebar or Navigation.
- •When you need built-in content panels — TabMenu is navigation-only; render panels yourself.
Keep labels short and parallel so the row stays scannable.
Don't use full sentences as tab labels — they break the horizontal scan.
Own panels outside TabMenu — it only renders the tab list.
Don't use TabMenu for exclusive toolbar filters — use Segmented Control.
Behaviors
linkValue model
- •Uncontrolled: defaultValue on TabMenu.
- •Controlled: value + onValueChange (from Base UI Tabs.Root).
- •Every TabMenu.Item needs a unique value.
Visual variants
- •variant filled (default) or underlined.
- •size sm or md (default md).
- •Items stay inline — there is no overflow menu.
Panels
- •TabMenu does not render tab panels — compose content yourself from the selected value.
Content Guidelines
linkLabels
- •Prefer nouns or short phrases that name the destination.
- •Keep icon + label pairs consistent across the set when using icons.
Count
- •Keep the set short enough to fit without wrapping on common breakpoints.
- •Disable items that are temporarily unavailable rather than removing them mid-session.
Accessibility
linkText & Labels
- •Visible label text is the accessible name for each tab.
- •Disabled tabs are not selectable and use disabled styling.
ARIA attributes
- •Built on Base UI Tabs — list and tab roles are provided by the primitives.
- •Active state is reflected through the tabs selection model.
Keyboard Support
- •Tab → focus the tab list / active tab.
- •Arrow keys → move between tabs.
- •Enter / Space → activate the focused tab (per Tabs behavior).
WCAG Compliance Standards
FAQs
linkDoes TabMenu include panels?
No. It only renders the horizontal tab list. Listen to value / onValueChange and render your own content.
Filled vs underlined?
filled uses a soft pill background on the active tab. underlined uses a bottom border accent — quieter for page-level sections.
TabMenu vs Segmented Control?
TabMenu switches destinations/views. Segmented Control is better for exclusive filter or mode switches in a toolbar.