Expandable Tabs

Use Expandable Tabs for a compact list of icon-led destinations. The active item expands into a labeled pill, while keyboard navigation remains immediate and predictable.

Install

terminal

npx shadcn@latest add @sona-ui/expandable-tabs

Basic usage

navigation-tabs.tsx

import { Home, Settings } from "lucide-react";
import ExpandableTabs from "@/components/ui/expandable-tabs/expandable-tabs";
 
const tabs = [
{ value: "home", title: "Home", icon: Home },
{ value: "settings", title: "Settings", icon: Settings },
];
 
export function NavigationTabs() {
return <ExpandableTabs tabs={tabs} defaultValue="home" />;
}

Examples

Use controlled value when the selection must update another part of the interface. Disable a tab only when its destination is unavailable.

API

Property	Type	Default	Description
`tabs`	`ExpandableTabItem[]`	`required`	Tabs displayed in the expandable horizontal tab list.
`value`	`string`	`—`	Controlled active tab value.
`defaultValue`	`string`	`—`	Initially active tab for uncontrolled usage.
`onValueChange`	`(value: string) => void`	`—`	Called when the active tab changes.
`ariaLabel`	`string`	`"Expandable tabs"`	Accessible label for the tab list.
`className`	`string`	`—`	Additional classes for the root container.
`listClassName`	`string`	`—`	Additional classes for the tab list.
`activeTabClassName`	`string`	`—`	Additional classes for the active tab.
`motionConfig`	`MotionConfigProps`	`—`	Motion configuration applied to the layout and label transitions.

Accessibility

Expandable Tabs uses Base UI tab semantics, arrow-key navigation, and visible focus states. Pointer input receives spatial motion while keyboard input updates without travel.

Styling

Override root, list, active tab, and motion options to match the surrounding navigation. Reduced-motion preferences keep the active state clear without expansion.

Contact

Found a bug or need help using this component? Open an issue on GitHub.

License & Usage

Sona UI is available under the MIT license. You may use, modify, and distribute this component in personal and commercial projects.