# TopNavMegaMenu

Full-width panel below the top bar for richer navigation. Pass `items` and optional `featured` (usually a `TopNav.MegaMenu.FeaturedCard`). Opens on hover/focus after a short delay; dismiss with Escape or an outside click. Also available as `TopNav.MegaMenu`.

## Examples

### Default

A mega menu trigger with a short item list and a featured card.

```tsx
import { TopNav } from '@var-ui/react';

<TopNav>
  <TopNav.MegaMenu
    label="Solutions"
    items={[{ id: 'startups', title: 'For startups', href: '/startups' }]}
    featured={<TopNav.MegaMenu.FeaturedCard title="Enterprise" description="Scale" />}
  />
</TopNav>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Featured card

Use `TopNav.MegaMenu.FeaturedCard` for the right-hand promo slot — title, description, optional `href`, and an `action` control.

```tsx
import { Button, TopNav } from '@var-ui/react';

<TopNav>
  <TopNav.MegaMenu
    label="Solutions"
    isOpen
    items={[
      { id: 'startups', title: 'For startups', href: '/startups' },
      { id: 'enterprise', title: 'For enterprise', href: '/enterprise' },
    ]}
    featured={
      <TopNav.MegaMenu.FeaturedCard
        title="Platform tour"
        description="See how teams build with Acme in under five minutes."
        href="/tour"
        action={<Button intent="secondary" size="sm">Watch demo</Button>}
      />
    }
  />
</TopNav>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| label | string | yes |  |  |
| children | ReactNode | no |  | Extra panel content rendered alongside `items` (e.g. hand-composed `TopNav.MegaMenu.Item`s). |
| className | string \| undefined | no |  |  |
| closeDelay | number \| undefined | no | 250 | Delay before the panel closes after the pointer/focus leaves, in milliseconds. |
| featured | ReactNode | no |  | Right-panel slot, usually a `TopNav.MegaMenu.FeaturedCard`. |
| isOpen | boolean \| undefined | no |  | Controlled open state — omit to let the menu manage it internally. |
| items | TopNavRichItem[] \| undefined | no |  |  |
| onOpenChange | ((isOpen: boolean) => void) \| undefined | no |  |  |
| openDelay | number \| undefined | no | 150 | Delay before the panel opens on hover/focus, in milliseconds. |

## Accessibility

The trigger exposes `aria-expanded` and `aria-haspopup`. Escape closes the panel and returns focus to the trigger. Prefer clear item titles and featured-card copy so the panel works without relying on imagery alone.