Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.
Please don't forget to read Usage part of each element.
Action menu
List of actions hidden on a menu until the user clicks on the menu button.
last modified: 08/06/2022 11:30:04
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.

This is not a dropdown
Action cannot be used as dropdown, selection pattern or any other form element. If you are looking for a selection pattern, use either the dropdown or the select component.
States

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

-
Action menu button
Triggers the action menu. -
Action menu container
The menu itself, containing a list of menu items. -
Action label
Use concise labels so users can quickly decide on an action. -
Action icon (optional)
You can use an icon to illustrate the action. -
Separator (optional)
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.
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.

-
Small action menu
-
Big action menu
Positioning
Action menu can be aligned on the right or on the left. Choose the version that fits your design.

last modified: 30/09/2021 11:10:06
Sizes and colors
last modified: 09/08/2022 14:45:07