Back to components

Dropdown Menu

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

Preview

Table of Contents

Edit this section, Opens in new window

Overview

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

Behaviours

Interactions

Hover

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

Focus

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

Edit this section, Opens in new window

Anatomy

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.

Separators

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

Icons can be added for recognizable actions.

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