## Nav Dropdown (S—185)

A top-nav with dropdown panels: one panel morphs its size and slides between items instead of closing and reopening.

- URL: https://sundaeui.dev/components/nav-dropdown
- Category: Navigation & menus · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/nav-dropdown.json`
- Tags: morph, mega-menu, header, menu, navigation, dropdown

Hovering from Product to Solutions keeps the same panel open and animates its width, height and position to the new content, which slides in from the direction you moved.
Click and keyboard work too: Enter opens, arrows move between top items, Escape closes. On narrow cards the panel spans the full width.

### Usage

```tsx
import { NavDropdown } from '@/components/sundae/nav-dropdown'

<NavDropdown />
```

### Props

- `items` (`{ id: string; label: string; links: { title: string; desc: string }[] }[]`, required): Top items and their panel links.
- `openDelay` (`number`, default `80`): Hover intent in ms.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Marketing sites and docs headers with grouped links.

### When not to use

- Apps: use a sidebar.

### Accessibility

- Top items are buttons with aria-expanded controlling the panel region; links inside are real links.
- Escape closes and returns focus to the item.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- ← / →: Move between items
- Enter / ↓: Open panel
- Esc: Close