Prepared Docs

TabMenu from @prepared911/ui-core is a Radix Tabs list used for in-page selection (filters, local view modes). The primitive handles the tabs pattern; your job is to label the group, connect the list to the panel that updates, and make counter values meaningful.

What the component handles

Tabs semantics. Root → role="tablist"; tabs → role="tab" with aria-selected.
Roving focus. Only the active tab participates in the tab sequence; arrow keys move the visible focus.
Automatic activation. Tabs activate on arrow-key focus in the default mode.

What you must provide

Accessible name for the group. Pass aria-label or aria-labelledby on the container so rotor users know what the tabs filter.
Panel association. When TabMenu drives a visible content region, wire aria-controls on each tab and aria-labelledby on the panel; the panel's role="tabpanel" and tabIndex={0} let keyboard users reach the content.
Meaningful counter values. counter badges must supplement the tab label ("Unread · 12"), never replace it. Ensure counters announce naturally alongside the tab name.

Keyboard behavior

Tab moves focus into the tablist (lands on the selected tab).
Arrow Left / Right / Up / Down move between tabs.
Home / End move to the first / last tab.
Enter / Space activate when manual activation is enabled.

Semantics and roles

role="tablist" with aria-orientation.
role="tab" with aria-selected and aria-controls.
Disabled tabs expose aria-disabled.

Known caveats

Navigation routes. If selecting a tab changes the URL or page identity, use TabNav instead—tablist semantics don't fit true navigation.
Icon-only tabs. Every tab must have an accessible name. An icon alone requires an aria-label or a visually hidden label.

Tab Menu / API and Development

Tab Nav / Usage

What the component handles

What you must provide

Keyboard behavior

Semantics and roles

Known caveats

What the component handles

Tabs semantics. Root → role="tablist"; tabs → role="tab" with aria-selected.
Roving focus. Only the active tab participates in the tab sequence; arrow keys move the visible focus.
Automatic activation. Tabs activate on arrow-key focus in the default mode.

What you must provide

Accessible name for the group. Pass aria-label or aria-labelledby on the container so rotor users know what the tabs filter.
Panel association. When TabMenu drives a visible content region, wire aria-controls on each tab and aria-labelledby on the panel; the panel's role="tabpanel" and tabIndex={0} let keyboard users reach the content.
Meaningful counter values. counter badges must supplement the tab label ("Unread · 12"), never replace it. Ensure counters announce naturally alongside the tab name.

Keyboard behavior

Tab moves focus into the tablist (lands on the selected tab).
Arrow Left / Right / Up / Down move between tabs.
Home / End move to the first / last tab.
Enter / Space activate when manual activation is enabled.

Semantics and roles

role="tablist" with aria-orientation.
role="tab" with aria-selected and aria-controls.
Disabled tabs expose aria-disabled.

Known caveats

Navigation routes. If selecting a tab changes the URL or page identity, use TabNav instead—tablist semantics don't fit true navigation.
Icon-only tabs. Every tab must have an accessible name. An icon alone requires an aria-label or a visually hidden label.