Menu overview

Menus are transient containers of contextually related actions, values, or destinations.

Action

An action menu is a transient container of contextually related actions, revealed by a trigger, that allows users to take one immediate action before dismissing.

Filter

Filter menus open from a filter chip and allow users to adjust parameters before applying.

Navigation

Menus present a short list of actions, destinations, or values related to a control or selection.

Menu action labels in a list with Order, Review, Share, Move, Delete

When to use each menu

The primary goal of the interaction type should determine which type of menu is used.

A flowchart titled "Choosing the right menu type" guides users with three yes/no questions: (1) "Is the goal to act on content or the page?" — Yes: "Use Action menu" (Edit, Delete, Share). (2) "Is the goal to filter or sort content?" — Yes: "Use Filter menu" (Sorting, color selectors). (3) "Is the goal to navigate?" — Yes: "Use Navigation menu" (Page links, sections). No at the end: "Review the interaction goal."

Sheet vs Popover vs Native Menu

Menu items should be in platform-appropriate containers.

Web uses the Evo popover menu across screen sizes.

Native menus should be used for simple action menus with text and optional icons while form and filter selections can use a context sheet for longer lists.

Positioning

The menu should appear in the most logical, convenient place for users. The default placement is below the trigger element. If the trigger element is near the screen’s edge the menu adjusts to remain visible.