Expandable tabsPro
Icon tabs where the selected one grows to reveal its label.
Showing notifications · use ← / → to move
When to use
- Compact toolbars and mobile nav where icons save space but labels prevent guessing.
When not to use
- Tabs with long labels or more than about 8 options.
Installation
Usage
Import it from @/components/ui/expandable-tabs after installing.
example.tsx
import { Bell, Home, User } from "lucide-react";
import { ExpandableTabs } from "@/components/ui/expandable-tabs";
<ExpandableTabs
aria-label="Account"
defaultValue="home"
tabs={[
{ value: "home", label: "Home", icon: <Home /> },
{ value: "alerts", label: "Alerts", icon: <Bell /> },
{ type: "separator" },
{ value: "profile", label: "Profile", icon: <User /> },
]}
/>API reference
ExpandableTabs
A tablist of icons; the selected tab expands to show its label.
| Prop | Type | Default | Description |
|---|---|---|---|
| tabs | readonly (ExpandableTab<T> | { type: "separator" })[] | – | ExpandableTab: { value, label, icon }. |
| value / defaultValue / onValueChange | T | – | Controlled or uncontrolled. |
| aria-label | string | – | Names the tablist. |
Keyboard interactions
| Keys | Action |
|---|---|
| ←or→ | Move and select |
| HomeorEnd | First or last tab |
Accessibility
- role="tablist" with aria-selected and roving tabindex.
- Every tab is named by its label even when collapsed.
Motion
- The pill slides between tabs and the label unfolds with a spring; neighbours glide aside.
Responsive behavior
- Hugs its content; collapsed tabs keep it compact on phones.
Performance
- Layout animation on a handful of buttons.
Notes for AI
- Use as const on the tabs array to type value as a literal union.
This page as Markdown, for assistants and coding agents:
/components/expandable-tabs/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt