Proximus design system
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.

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


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.


  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.


  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


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