Back to components

Dropdown Menu

A Dropdown Menu offers a list of actions, links or functions that a user can access.

Table of Contents

Edit this section, Opens in new window


A Dropdown Menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Edit this section, Opens in new window




When hovered, the menu item is filled with BE 1, DARK BEIGE.


2px dotted outline with 2px outline-offset with color BL 1, BLUE.

Edit this section, Opens in new window


Parent menu
  1. Subtle border and shadow
  2. A disabled action (optional)
  3. Hovered menu item
  4. Keyboard shortcut (optional)
  5. A separator (optional)
  6. Default menu item
  7. A parent item (optional)
  8. Action icon (optional)
  1. Sub menu opens up from action
  2. Stronger font for emphasized active item
  3. Check mark for active item

A menu item is the option provided to the user. It can either be a link or a button.

Parent actions

Active actions

Disabled actions

Display actions as disabled when they can only be used sometimes, under certain conditions. They should be displayed as disabled rather than removing them.


Menu items can be separated with with a separator, to divide content.

Keyboard shortcuts

Keyboard shortcuts can be used for easy access to often used options.


Icons can be added for recognizable actions.

Edit this section, Opens in new window
Contact us, Opens in new window