Menu
A list of actions, inline or floating.
<mm-button id="orders-actions" variant="ghost" icon="more-horiz" label="More actions"></mm-button>
<mm-menu anchor="orders-actions" label="Asset actions">
<mm-menu-item icon="content-copy" shortcut="mod+shift+c">Copy MRN</mm-menu-item>
<mm-menu-item icon="terminal">Open in Query</mm-menu-item>
<mm-menu-separator></mm-menu-separator>
<mm-menu-item icon="delete" danger value="delete">Delete asset</mm-menu-item>
</mm-menu>
Guidance
Menus hold secondary actions behind a "More" button or a right-click. A menu is a raised layer
with radius-md and shadow-float. Opened from the keyboard it appears instantly; opened with
the pointer it fades in over --mm-dur-menu. Destructive items come last, after a separator,
in crimson with an icon and a word naming what is destroyed ("Delete asset").
Without anchor the menu renders inline as a static list. With anchor (an element or the id of
one in the same root) it becomes a light-dismiss popover positioned against it, opened with open
or show(). Keyboard model: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/ (arrow keys
wrap, Home and End, typeahead, Enter and Space activate, Escape closes and returns focus to the
trigger, Tab closes).
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | Opens and closes a floating menu (one with an anchor). |
anchor | anchor | string | Element | null | null | The trigger: an element, or the id of an element in the same document or shadow root. Makes the menu float. |
placement | placement | Placement | 'bottom-start' | Floating UI placement against the anchor. |
label | label | string | '' | Accessible name of the menu. Menu buttons fill this from their label. |
items | MmMenuItem[] | Every item that belongs to this menu, in order. | ||
floating | boolean | True when the menu floats over the page rather than sitting inline. |
Methods
| Method | Description |
|---|---|
show() | Opens the floating menu. |
hide() | Closes the floating menu. With returnFocus, focus goes back to the trigger. |
activate() | Activates an item as if it had been clicked: toggles checkable items, fires mm-select and closes a floating menu. |
Events
| Event | Detail | Description |
|---|---|---|
mm-select | CustomEvent<MenuSelectDetail> | An item was activated. Cancel it to keep a floating menu open. |
mm-open | CustomEvent<Record<string, never>> | The floating menu opened. |
mm-close | CustomEvent<Record<string, never>> | The floating menu closed. |
Slots
| Slot | Description |
|---|---|
| Default | mm-menu-item, mm-menu-separator and mm-menu-group elements. |
CSS parts
| Part | Description |
|---|---|
menu | The list wrapper. |
CSS custom properties
| Property | Description |
|---|---|
--mm-menu-min-width | Minimum width of the menu (default 220px). |
Examples
Every state of mm-menu in Storybook, with keyboard and screen reader tests.