OverflowTabs

pro

OverflowTabs measures a tab strip against its available width and tucks whatever doesn't fit behind a "More" dropdown.

Installation

Add this component with the NateUI CLI.

npx nateui@latest add OverflowTabs

pnpm dlx nateui@latest add OverflowTabs

yarn dlx nateui@latest add OverflowTabs

Prop	Description	Type	Default
`tabList`	Tabs to render. `label` accepts any `ReactNode`, so icons or inline state indicators compose directly into it — there's no separate icon field (see Icon Labels).	`OverflowTabsTab[]`	—
`value`	Currently active tab. When the active tab has overflowed into the dropdown, the visible tab strip shows no active indicator and the "More" button takes its place instead.	`string`	—
`onChange`	Called with the new tab's value, whether it's clicked in the visible strip or in the overflow dropdown.	`(value: string) => void`	—
`children`	Extra content docked after the tabs, such as an action button. Its width is included in the overflow calculation.	`ReactNode`	—
`tabListClass`	Class names applied to the tab list container.	`string`	—
`tabNavClass`	Class names applied to each visible tab.	`string`	—
`className`	Class names applied to the inner `Tabs` root, not the outer container.	`string`	—
`...rest`	Native `div` props, applied to the outer container.	`NativeOverflowTabsDivProps`	—

type OverflowTabsTab = {
  label: string | ReactNode;
  value: string;
}
 
type NativeOverflowTabsDivProps = Omit<ComponentProps<'div'>, 'onChange'>