Components / Library Version 5.32.0

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 wm-menuitem component as a child.

After an action is executed make sure to properly handle focus for keyboard users.

PropertiesExamplesAPIAccessibilityNotes

** Required in certain cases

Properties of the parent element wm-action-menu

action-menu-type
icon | text | selector | selector-primary
Indicates whether the anchoring button should be an icon, text, or style of selector box. Defaults to icon.

Properties for each Action Menu type:

tooltip: Required tooltip-position: Optional label-for-identical-buttons: SEE DETAILS BELOW icon: Optional icon-flip: Optional icon-rotate: Optional icon-size: Optional disabled: Optional buttonText: Required icon: Optional icon-flip: Optional icon-rotate: Optional icon-size: Optional disabled: Optional buttonText: Required icon: Optional icon-flip: Optional icon-rotate: Optional icon-size: Optional disabled: Optional dark-mode: Optional buttonText: Required icon: Optional icon-flip: Optional icon-rotate: Optional icon-size: Optional disabled: Optional tooltip-position: Optional
button-text **
string
Indicates the text to display for the text or selector action menu. Required when button-type is text or selector.
tooltip **
string
Indicates the text to display in the tooltip for the icon action menu. Required when button-type is icon. It should indicate the name or purpose of the menu.
dark-mode
boolean
Set dark mode for selector and selector-primary.
disabled
boolean
The selector menu can be disabled as a whole (rather than just individual menuitems).
icon
string
Sets an icon for the text, selector, and selector-primary types, displayed alongside button-text. For the icon type, overrides the default "more options" icon. Accepts the following formats to reference different icon sources.
  • The name of a commonly-used icon listed on our Icons guidelines. Value must begin with ”#”. For example, #add-person
  • A local file path pointing to an svg symbol. For example: "/icons/icons.svg#pencil". Learn more on adding SVGs in our Component Usage section.
icon-flip
horizontal | vertical
For use with the icon property, flips the icon along the axis specified.
icon-rotate
number
For use with the icon property, rotates icon by the degrees specified.
icon-size
string
Change size of the icon to fine tune the visual rendering if it appears too large or small. Not intended for general sizing. Accepts any valid CSS size value, like 22px or 1.3rem.
label-for-identical-buttons
string
Use only in this specific case:
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.
max-width
string
Sets the maximum width of the dropdown. Accepts any valid CSS width value (e.g. 300px, 20rem, 50%). Defaults to 25.875rem. The dropdown may still render narrower to fit its content or the space available.
tooltip-position
top | bottom | left | right | top-left | top-right | bottom-left | bottom-right
Sets the position of the tooltip. Defaults to 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 wm-menuitem

description
string
Provides descriptive text for the menuitem. Description text has a character limit of 100 characters, and disallows use of the icon property.
disabled
boolean
Disables the item.
icon
string
Sets the icon displayed. Required if button-type is set to icononly. Accepts the following formats to reference different icon sources.
  • The name of a commonly-used icon listed on our Icons guidelines. Value must begin with ”#”. For example, #add-person
  • A local file path pointing to an svg symbol. For example: "/icons/icons.svg#pencil". Learn more on adding SVGs in our Component Usage section.
  • A Material Design Icon character code. For example: "f3eb". See the complete list of character codes on the Material Design Icon CDN (opens a new window). (Deprecated)

Usage in HTML

Edit the code below to see changes reflected in the example above.

Usage in Elm

Code generated from HTML.
wmActionMenuLoaded
Emitted when the menu has finished loading.

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

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.
Key Function
Enter
  • Activates the menuitem, causing the "onclick" function passed to it to run.
  • Closes the menu.
  • Sets focus on the menu button.
Escape
  • Closes the menu.
  • Sets focus to the menu button.
Up Arrow
  • Moves focus to the previous menuitem.
  • If focus is on the first menuitem, moves focus to the last menuitem.
Down Arrow
  • Moves focus to the next menuitem.
  • If focus is on the last menuitem, moves focus to the first menuitem.
Home Moves focus to the first menuitem.
End Moves focus to the last menuitem.
A-Z a-z
  • Moves focus to the next menuitem with a label that starts with the typed character if such a menuitem exists.
  • Otherwise, focus does not move.
  • 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.
Back to Top