# Mega Menu (Moonarc)

A menu bar whose panels open as popovers anchored under their triggers, columns revealing with a stagger, closing on Escape or outside click. Zero JavaScript of its own: the popover attribute and anchor positioning do the menu; Reveal does the columns.

- Pro block. Install: `npx shadcn@latest add @moonarc-pro/mega-menu` (license key required)
- Tier B · category section · trigger click
- Readout: `<MegaMenu menus={[{ id, label, columns }]}>`
- Browser support: newly (Chrome 125 · Firefox 147 · Safari 26); elsewhere: panels open as a sheet at the bottom of the viewport
- Measured cost: 0 B JS of its own · uses Reveal + runtime (with dependencies 3.0 kB raw; CSS 11.0 kB raw)
- Page: https://moonarc.dev/components/mega-menu/

## Props

| Prop | Type | Default | Description |
|---|---|---|---|
| `menus` | `{ id, label, columns: { title, links: { href, label, description? }[] }[] }[]` | none | One popover per menu; ids must be unique on the page. |
| `tone` | `'surface' | 'muted' | 'ink' | 'brand'` | `unset (paints nothing)` | The ground: the page surface, a muted band, an always-dark ink panel, or a deep brand panel. Each paints --background, --ma-tone-muted (over --muted, with a --border hairline), --ma-tone-ink or --ma-tone-brand (over --primary) with the matching text. With theme.css, a painted tone also re-declares --card, --border, --input and --ring inside the section, so cards and fields follow the ground. Decoration is strongest on brand. |
| `density` | `'compact' | 'cozy' | 'roomy'` | `'cozy'` | Trigger and panel padding ×0.8 / ×1 / ×1.25 through --ma-density. |
| `label` | `string` | `'Site'` | Accessible name of the menu bar's nav. Make it unique per page. |

## Usage

```astro
---
import MegaMenu from '@/components/moonarc/pro/MegaMenu.astro';
---
<MegaMenu menus={[
  { id: 'product', label: 'Product', columns: [
    { title: 'Features', links: [{ href: '/features/', label: 'Overview', description: 'What it does' }] },
    { title: 'Resources', links: [{ href: '/docs/', label: 'Docs' }] },
  ] },
]} />
```

## Reduced motion

Panels crossfade; columns appear without stagger.

## With ClientRouter

Native; nothing to rebind.

## Craft

- One Popover per menu, so the browser closes one when another opens, with no state to keep.
- placement bottom span-right aligns the panel's left edge with the trigger and lets it grow rightward, flipping when it would overflow.
- Columns stagger 50 ms: the panel reads as arriving in one motion, with texture.
- The panels keep the popover colours (--popover, --popover-foreground) on every tone of the bar, so a link in a panel reads the same under an ink or brand bar.

## Replaces

- NavigationMenu (Radix / shadcn)
- Flyout menus (Tailwind Plus)

## Source

Pro block. The source is served by the license-gated registry: `npx shadcn@latest add @moonarc-pro/mega-menu` with a key in components.json (https://moonarc.dev/account/). Everything it composes is free: popover, reveal.