# Phone tab bar

Phone only: four tabs at the bottom (the place's top destinations, then Menu), 62px with the safe area, frosted white. Menu opens the full navigation drawer.

- **Group:** Navigation and shell · **family:** `app-shell` · **shadcn:** composed
- **Build:** Custom component (no shadcn equivalent).
- **In apps/admin today:** Not in apps/admin.
- **Client component:** no. 

## Content rules

- One-word labels.

## Do

- Hide inside guided flows (wizard focus mode).

## Don't

- More than four tabs + Menu.

## Accessibility

- **Keyboard:** Links.
- **ARIA:** `<nav aria-label="Main">`, `aria-current`.
- **Focus:** Ring.

## Tokens

`--background` `--actbar-blur` `--border` `--text-10-5` `--font-voice` `--muted-foreground` `--primary` `--font-stretch-title` `--ring` `--r-control` `--r-pill` `--primary-foreground` `--w-semibold` `--text-10` `--font-ui` `--warning`

## Files

`tab-bar.html` live specimen · `tab-bar.css` kit rules · `tab-bar.d.ts` props · full page: `docs/components/tab-bar/` (phone: `m/`).