> 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/header-dropdown.md).

# x-header-dropdown (Analog)

The header's dropdown menu: a small panel of links that floats under a top-level nav item.

The header's dropdown menu: a small panel of links that floats under a top-level nav item.

| Directive / magic            | What it does                                                                                           |
| ---------------------------- | ------------------------------------------------------------------------------------------------------ |
| `x-header-dropdown="menuId"` | The root. Registers the element as the dropdown popup for that menu id (required)                      |
| `x-header-dropdown:panel`    | Shows the inner panel while this dropdown is the active popup                                          |
| `$headerMenuPopup`           | The popup state from [header-menu](/reference/alpine/header-menu.md): `isVisible`, `close()`, and more |

The root registers with the `headerMenu` store as a `dropdown` popup and floats under the active nav item: `bottom-start`, matching the item's width, flipping and shifting when out of room. Position updates only run while the dropdown is visible, because the reference element changes with the active nav item. Opening and closing, hover delays, and keyboard handling come from [header-menu](/reference/alpine/header-menu.md). This plugin only positions and shows the panel. The directive throws when the menu id is missing.

## Examples

### A dropdown panel

Use `x-header-dropdown` with the link's menu id, and `x-header-dropdown:panel` on the content:

```html
<div x-header-dropdown="{{ menu_id }}" class="absolute z-50" x-cloak>
  <div x-header-dropdown:panel x-transition:enter="…" x-transition:leave="…">
    <ul>
      <li><a href="…">Shirts</a></li>
      <li><a href="…">Trousers</a></li>
    </ul>
  </div>
</div>
```

`x-header-dropdown:panel` is an `x-show` on `$headerMenuPopup.isVisible`, so `x-transition` on the same element animates the open and close.

### Animating the links separately

Use `$headerMenuPopup.isVisible` directly to run a second animation inside the panel:

```html
<ul
  :class="{
    'animate-in fade-in slide-in-from-top-[5px]': $headerMenuPopup.isVisible,
    'animate-out fade-out slide-out-to-top-[5px]': !$headerMenuPopup.isVisible,
  }"
>
  …
</ul>
```

The theme's dropdown fades its link list in after the panel clip animation. The `--header-menu-dropdown-enter-duration` variable sets the delay.

## Customizing

Analog renders one dropdown per top-level link whose sub-links go one level deep, through the `header-dropdown` snippet; links with deeper trees get a megamenu instead (see [x-megamenu](/reference/alpine/megamenu.md)). Dropdowns only open from the desktop nav, so the snippet defers Alpine on phones with `data-lazy-alpine="desktop"`. For how header menus behave in the theme editor, see [Header](/features/header.md).