# Expandable tabs

> Icon tabs where the selected one grows to reveal its label.

Component · Pro · https://lodeui.com/components/expandable-tabs

## 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

```bash
npx shadcn@latest add @lode/expandable-tabs
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="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 |
| --- | --- |
| ← / → | Move and select |
| Home / End | 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.

## Related

- [Tabs](https://lodeui.com/components/tabs) — Underline or pill tabs with an indicator that glides between them.
- [Segmented control](https://lodeui.com/components/segmented-control) — A compact single choice with a pill that slides to the selection.
- [Dock](https://lodeui.com/components/dock) — macOS-style dock whose icons magnify under the pointer, with tooltips, badges and active dots.