# Menu item

One sidebar entry: 16px icon, label, optional count or an amber hold / stuck pill, nested children for Settings and Website. The current item gets a 2px periwinkle rail.

- **Group:** Navigation and shell · **family:** `app-shell` · **shadcn:** Sidebar
- **Build:** `SidebarMenuButton` + `SidebarMenuBadge` + `SidebarMenuSub`.
- **In apps/admin today:** No ui/sidebar.
- **Client component:** no. 

## Content rules

- Labels match page titles.

## Do

- Show counts only when they need action.

## Don't

- Badges for vanity counts.

## Motion

- Background and colour on `--motion-hover`.

## Accessibility

- **Keyboard:** Links; Enter follows.
- **ARIA:** `aria-current="page"` on the current item; counts read as "3 stuck" via text, not colour.
- **Focus:** 2px `--sidebar-ring` outline, 1px offset.

## Tokens

`--font-voice` `--font-stretch-title` `--r-control` `--text-card` `--w-medium` `--motion-hover` `--sidebar-foreground` `--sidebar-item-on` `--sidebar-accent-foreground` `--e-sidebar-item-on` `--sidebar-primary` `--sidebar-item-on-icon` `--text-micro` `--font-ui` `--sidebar-ring` `--warning-foreground` `--warning` `--r-chip` `--w-semibold` `--text-body`

## Files

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