# Dropdown Menu
> A button-triggered menu that closes on outside click or Escape.
A dropdown menu hangs a short list of actions off a button. You click the button
to reveal it, pick an action, and it gets out of the way, either because you chose
something, clicked elsewhere, or pressed `Escape`. Like the rest of the library it
runs on one boolean in `s-data`, and the two dismissal paths, outside click and
`Escape`, are wired with plain [event modifiers](https://summitjs.velofy.co/events/).
```summit
```
## Toggling
The trigger runs `@click="open = !open"`, so clicking it flips the menu open and
closed. The menu itself is a `.s-menu` shown with [s-show](https://summitjs.velofy.co/s-show/), which keeps
the markup in the DOM and toggles its visibility. The wrapper carries the class
`.s-anchor`, which positions the menu absolutely just under the button, so the
list floats over the page instead of pushing content down.
## Closing again
Two handlers cover the ways a menu should dismiss itself:
- Outside click: `@click.outside="open = false"` on the `.s-menu` fires when a
click lands anywhere outside the menu, so clicking away closes it.
- `Escape`: `@keydown.escape="open = false"` on the wrapper closes the menu from
the keyboard.
Because the whole thing shares one `open` value, the two paths cannot drift out of
sync.
## The items
The menu is a stack of building blocks you arrange to taste:
- `.s-menu-item` is a single action. Use a `