Menu

A menu, also known as a dropdown, is a temporary list of actions or functions that creates organized pathways for user interactions. Designed with intention, menus help users navigate complex choices while maintaining a clean and focused interface.

View in Storybook

When to Use

Use menus to present a collection of related actions or navigation options that would otherwise clutter the interface. Menus are perfect when you need to offer multiple choices without overwhelming the primary content area.

Guidelines

A menu should always be triggered from a button (using the Ghost icon or Right icon button) or from a similar interactive element. 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 thoughtfully. 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.

Compact

Compact menus provide streamlined options for space-conscious interfaces.

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

Implementation in Figma

1. Locate the Assets tab in the Layers Panel.
2. There are two ways to locate the Menu component needed:
   1. Use the search bar to search for a component grouping name or variation name.
   2. Scroll through the folders list and open the grouping needed.
3. Once the component is located, click and drag it into the frame/artboard.

Do's and don'ts

❌ Do not use a menu with a scrim