This component provides a dropdown menu of action items. When closed, it displays a text-only button, icon-only button, or a selector box. Selecting a menuitem completes the associated action and closes the menu. It should have at least one
wm-menuitem component as a child.
After an action is executed make sure to properly handle focus for keyboard users.
** Required in certain cases
Properties of the parent element
icon | text | selector | selector-primary
Properties for each Action Menu type:
iconaction menu. Required when
icon. It should indicate the name or purpose of the menu.
selectormenu can be disabled as a whole (rather than just individual
If a page has several
iconaction menus with an identical tooltips, the
aria-labelof the button needs to include more descriptive information than the tooltip displayed. In that case, set this prop to the more descriptive name, and leave the
top | bottom | left | right | top-left | top-right | bottom-left | bottom-right
left. If there is not enough space to display the tooltip at the indicated position, the component will automatically reposition it.
Properties of the children elements
A reference to a Material Design Icon. Adding this property will include an icon before the menuitem text. Optional.
Commonly used icons:
See the complete list on the
Material Design Icon CDN Opens a new window
Use the icon name (without the
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
The "tooltip" property required for icon action menus ensures that the name or purpose of the menu is apparent on hover and announced by screenreaders.
|Down Arrow Space Enter||Opens menu and moves focus to first menuitem.|
|Down Arrow Space Enter||Opens menu and moves focus to last menuitem.|
|Home||Moves focus to the first menuitem.|
|End||Moves focus to the last menuitem.|
- When a menuitem is clicked, an attribute is temporarily added to the body. The attribute is used to reapply focus when a new menu is loaded with updated menuitems.
- Depending on context, screen readers may not announce the expanded state. This is normal behavior and does not constitutes an accessibility issue.