EDS – Equinor Design System

A menu, also known as a dropdown, is a temporary list of actions or functions.

Guidelines

A menu should always be triggered from a button—use the Ghost icon or Right icon button or from a text field. A menu can be dismissed by pressing Escape on the keyboard, clicking outside the menu, or by selecting an action or function in the menu. Full-bleed/full-width dividers are allowed to group content. Menus can be combined to create cascading menus allowing users to choose from a large variety of choices. These are organised by displaying menus with multiple levels of hierarchy. Cascading menus appear to the right of the parent and only on the left if there is no room for expansion on the right.

Don’t

  • Do not trigger a menu on hover.
  • Do not use a menu with a scrim.

Variations

FigmaExternal linkFigma menu design

There are three item types available to place in the Container: Subtitle, Item and Leading + item.

  • Item labels are mandatory.
  • The right aligned command and icon is optional.
  • The left aligned icon is mandatory to use in a menu grouping on at least one item.

Content

  • Keep the item labels as short as possible.
  • Use meaningful item labels that explain the function.
  • Item labels should be in the active tense.
  • Do not mix nouns and verbs. Pick one or the other.

✏️ Edit this page on GitHub