Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProTabs that never wrap or scroll: tabs that do not fit collapse into a More menu while the selected tab always stays visible.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when the number of tabs varies or the container is narrow (a side panel, a settings page on a phone) and horizontal scrolling would hide tabs from view.
Do not use it for five tabs in a wide page: the plain tabs is simpler. Do not use it for navigation between pages; use a nav with links.
It builds on dropdown-menu, which the CLI installs for you.
| Prop | Type | Default | Description |
|---|---|---|---|
items | { value, label, content, disabled? }[] | - | The tabs and their panels. |
value / defaultValue | string | first enabled | Selected tab (controlled or initial). |
onValueChange | (value: string) => void | - | Called when the selection changes. |
moreWidth | number | 88 | Width reserved for the More button in px. |
aria-label | string | - | Accessible name of the tablist. |
tab elements with a roving tabindex; the More button sits next to it, so the tablist keeps a valid structure.| Key | Action |
|---|---|
| ArrowRight / ArrowLeft | next or previous tab (mirrored in RTL), activating it |
| Home / End | first tab / the More button |
| Enter or ArrowDown on More | opens the menu |
The component ships a Testing Library test (overflow-tabs.test.tsx) that covers all tabs fitting, collapsing into More, choosing from the menu, arrow-key movement and roving tabindex.