Menu
dm_menu / dm_menu_item
## Overview
Menu component wrapping the `el-dm-menu` and `el-dm-menu-item` custom elements.
Provides a dropdown/context menu with full keyboard navigation,
proper ARIA roles (`menu`/`menuitem`), and click-outside dismissal.
## Usage
```elixir
<.dm_btn id="trigger" variant="primary" onclick="this.nextElementSibling.toggle()">
Actions
</.dm_btn>
<.dm_menu anchor="#trigger">
<.dm_menu_item value="edit">Edit</.dm_menu_item>
<.dm_menu_item value="delete">Delete</.dm_menu_item>
</.dm_menu>
```
Open/close via JavaScript:
```javascript
document.querySelector('el-dm-menu').toggle();
document.querySelector('el-dm-menu').show();
document.querySelector('el-dm-menu').hide();
```
Listen for selection:
```javascript
menu.addEventListener('select', (e) => {
console.log('Selected:', e.detail.value);
});
```
Basic Menu
Actions
Edit
Copy
Delete
Menu with Icons
Options
Profile
Settings
Help
Disabled Items
Menu with Disabled
Cut
Copy
Paste
Placement Variants
Bottom Start
Top
Right
Initially Open
Already Open
Item 1
Item 2