Menu
Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Basic
<me-button id="menu-btn">Open Menu</me-button>
<me-menu id="my-menu">
<me-menu-item>Profile</me-menu-item>
<me-menu-item>My account</me-menu-item>
<me-menu-item>Logout</me-menu-item>
</me-menu>
<script>
const menu = document.getElementById('my-menu');
const btn = document.getElementById('menu-btn');
menu.anchorEl = btn;
btn.addEventListener('click', () => menu.open = true);
menu.addEventListener('me-close', () => menu.open = false);
</script>
With Selected Item
With Disabled Item
API — Menu
| Attribute / Property | Type | Default | Description |
|---|
open | boolean | false | Whether the menu is visible. |
anchorEl (property) | HTMLElement | — | Element to anchor menu position below. |
API — MenuItem
| Attribute | Type | Default | Description |
|---|
selected | boolean | false | Highlights the item as currently selected. |
disabled | boolean | false | Disables the item. |
value | string | — | Value included in the me-menu-item-click event detail. |
Events
| Event | Detail | Description |
|---|
me-close | { reason } | Fired on Menu when backdrop clicked or Escape pressed. |
me-menu-item-click | { value } | Fired on MenuItem when clicked. |
