> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/megamenu.md).

# x-megamenu (Analog)

The header's megamenu: one shared full-width panel that reveals, swaps, and closes flyout content for the whole nav.

The header's megamenu: one shared full-width panel that reveals, swaps, and closes flyout content for the whole nav.

| Directive / magic             | What it does                                                                                           |
| ----------------------------- | ------------------------------------------------------------------------------------------------------ |
| `x-megamenu`                  | The root. Watches the `headerMenu` store's active flyout and runs the open, swap, and close animations |
| `x-megamenu:panel`            | The shared panel every flyout renders into. Shown while a flyout is active or still closing            |
| `x-megamenu:content="menuId"` | A flyout's content. Registers as the flyout popup for that menu id; hidden unless displayed            |

The [header-menu](/reference/alpine/header-menu.md) store holds the active flyout and handles hover delays, keyboard input, and focus. This plugin animates the panel to follow the store: it opens with a top-to-bottom clip reveal and closes the same way in reverse, or fades instead on reduced-motion and low-power devices. Moving from one flyout to another animates the panel between the two layouts rather than closing and reopening. The panel's max height is capped to the visual viewport with a 24px bottom buffer, so a tall megamenu scrolls inside the panel instead of running off screen. While shown, the panel has `data-megamenu-visible`.

## Examples

### The shared panel

Use one `x-megamenu` root with one `x-megamenu:panel` for the whole header:

```html
<div x-megamenu data-lazy-alpine="desktop" data-lazy-alpine-module="@theme/megamenu">
  <mega-menu x-megamenu:panel x-cloak class="absolute inset-x-0 bg-canvas …">
    <!-- one x-megamenu:content per flyout -->
  </mega-menu>
</div>
```

The plugin ships in its own lazy bundle (`@theme/megamenu`) and only loads on desktop, where the flyouts can open.

### A content block

Use `x-megamenu:content` with the link's menu id on each flyout's content:

```html
<div x-megamenu:content="{{ menu_id }}" x-cloak class="grid section-grid …">
  …
</div>
```

The theme renders one of these per multi-level link (the `header-megamenu-content` snippet), then the section's custom megamenu blocks after them. A block that claims the same menu id registers later and replaces the default content. See [header-menu](/reference/alpine/header-menu.md) for how popup registration works.

### Reading the flyout state

Use `$store.headerMenu.activePopupType` to react to the megamenu from outside the panel:

```html
<div :class="{ 'shadow': $overflow.start && $store.headerMenu.activePopupType === 'flyout' }"></div>
```

The header uses this to show a top shadow only while a flyout is open and its content has scrolled.

## Customizing

Edit megamenu content, layout, and custom blocks in the theme editor. See [Header](/features/header.md). The panel inherits the header section's color scheme and padding settings through its `vars-*` class and `--section-pt`/`--section-pb` variables.