---
name: dropdown
category: overlays
summary: "Button-triggered floating menu with keyboard navigation"
subpath: "@42/core/dropdown"
---

Floating menu triggered by a button. Keyboard nav with arrows, Esc to close.

```html
<div data-c42-dropdown>
  <button data-c42-dropdown-trigger>Menu</button>
  <div data-c42-dropdown-menu>
    <button data-c42-dropdown-item>Option 1</button>
    <button data-c42-dropdown-item>Option 2</button>
  </div>
</div>
```

```ts
import { Dropdown } from '@42/core/dropdown';
new Dropdown(root, { placement: 'bottom-start', offset: 4, closeOnSelect: true });
```

Options: `placement` (Placement), `offset`, `closeOnSelect`
Events: `dropdown:open`, `dropdown:close`