## Orbit Nav (S—054)

An icon tab bar where the active tab grows into a labelled pill, with badge counts.

- URL: https://sundaeui.dev/components/orbit-nav
- Category: Navigation & menus · Art direction: Playful
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/orbit-nav.json`
- Tags: tabs, icons, animated, tab-bar, navigation, mobile

Inactive tabs are icons; the active one widens to show its label with a springy grid-column transition, so neighbours glide aside instead of jumping.
Badges sit on the icon and are included in the tab’s accessible name.

### Usage

```tsx
import { OrbitNav } from '@/components/sundae/orbit-nav'

<OrbitNav items={items} value={tab} onValueChange={setTab} />
```

### Props

- `items` (`OrbitItem[]`, required): id, label, icon and optional badge.
- `value` (`string`, required): Active id.
- `onValueChange` (`(id: string) => void`, required): Called on change.
- `shape` (`'pill' | 'squircle'`, default `'pill'`): Corner style.
- `accent` (`string`, default `'#ffffff'`): Active pill colour.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Bottom navigation in mobile web apps.
- Compact section switchers in toolbars.

### When not to use

- More than five destinations.
- Labels people need to see all the time.

### Accessibility

- A tablist with roving tabindex; tabs expose aria-selected.
- Badges are part of the name ("Inbox, 3 new").
- Reduced motion makes the expansion instant.

### Keyboard

- ← / →: Previous / next tab
- Tab: Leave the bar