Action menu

Overview

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.

States

1. Default state
   State visible before click.
2. Hover/Focused state
   State visible when the cursor hovers the action menu and triggered by keyboard navigation or click. Cursor becomes a pointer.
3. Active state
   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.

Anatomy

1. Action menu button
   Triggers the action menu.
2. Action menu container
   The menu itself, containing a list of menu items.
3. Action label
   Use concise labels so users can quickly decide on an action.
4. Action icon (optional)
   You can use an icon to illustrate the action.
5. Separator (optional)
   When action can be grouped, use the separator to facilitate scanning
6. Action label details
   Use this dedicated zone to give additional information about the action such as: keyboard shortcut, file size, etc.

Size matters

Action menu button comes out of the box in two sizes. Depending on your needs, you can use the small of the big version.

1. Small action menu
   
2. Big action menu
   

Positioning

Action menu can be aligned on the right or on the left. Choose the version that fits your design.