Please don't forget to read Usage part of each element.
List of actions hidden on a menu until the user clicks on the menu button.
Action menu is used when additional options are available to the user and there is a space constraint. The action menu keeps key actions close by in a clean and unobtrusive menu.
State visible before click.
State visible when the cursor hovers the action menu and triggered by keyboard navigation or click. Cursor becomes a pointer.
State visible when the action menu button is clicked, the action menu container is revealed with its content. Action menu button is in focus state.
Action menu button
Triggers the action menu.
Action menu container
The menu itself, containing a list of menu items.
Use concise labels so users can quickly decide on an action.
Action icon (optional)
You can use an icon to illustrate the action.
When action can be grouped, use the separator to facilitate scanning
Action label details
Use this dedicated zone to give additional information about the action such as: keyboard shortcut, file size, etc.
Action menu button comes out of the box in two sizes. Depending on your needs, you can use the small of the big version.
Small action menu
Big action menu
Action menu can be aligned on the right or on the left. Choose the version that fits your design.