Components / Library version 3.25.1
Action Menu
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 menuitem component as a child.
After an action is executed make sure to properly handle focus for accessibility reasons.
** Required in certain cases
icon | text | selector | selector-primary
icon
.
Properties for each Action Menu type:
string
text
or selector
action menu. Required when
button-type
is text
or selector
.
boolean
string
icon
action menu. Required when button-type
is icon
. It should indicate the name or purpose of the menu.
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.
string
If a page has several
icon
action menus with an identical tooltips, the aria-label
of 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 tooltip
prop unchanged.
boolean
selector
menu can be disabled as a whole (rather than just individual menuitems
).
For the properties of the children, see menuitem.
Deprecated properties
icon | text | selector
action-menu-type
. Previously, indicates whether the anchoring button should be an icon, text, or selector box.
Usage in HTML
Edit the code below to see changes reflected in the example above.
Usage in Elm
Code generated from HTML.
General
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.
Keyboard Support
Menu Button
Key | Function |
---|---|
Down Arrow Space Enter | Opens menu and moves focus to first menuitem. |
Down Arrow Space Enter | Opens menu and moves focus to last menuitem. |
Menu
Key | Function |
---|---|
Enter |
|
Escape |
|
Up Arrow |
|
Down Arrow |
|
Home | Moves focus to the first menuitem. |
End | Moves focus to the last menuitem. |
A-Z a-z |
|
- 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.