---
name: mega-menu
category: navigation
summary: "Horizontal nav with large multi-column panels"
subpath: "@42/core/mega-menu"
---

Horizontal nav bar where each top-level trigger opens a large multi-column
panel. Opens on hover/focus/click, closes on Escape / outside-click /
focus-leave, with arrow-key navigation between triggers (disclosure-menu ARIA
pattern). Triggers without a panel act as plain links.

```html
<nav data-c42-mega-menu aria-label="Main">
  <ul>
    <li data-c42-mega-menu-item>
      <button data-c42-mega-menu-trigger data-value="products">Products</button>
      <div data-c42-mega-menu-panel>…multi-column content…</div>
    </li>
    <li data-c42-mega-menu-item>
      <a data-c42-mega-menu-trigger href="/pricing">Pricing</a>
    </li>
  </ul>
</nav>
```

```ts
import { MegaMenu } from '@42/core/mega-menu';
const menu = new MegaMenu(root, { openOnHover: true, closeDelay: 150 });
menu.open('products');
```

Keyboard: Left/Right + Home/End move between triggers, ArrowDown opens + enters the panel, Escape closes.
Options: `openOnHover` (default true), `openDelay` (default 0), `closeDelay` (default 150)
Methods: `open(v)`, `toggle(v)`, `closeAll()`, `openValue`
Events: `megamenu:open` → `{ value }`, `megamenu:close` → `{ value }`