Menu

---

---

Anatomy

1. Popout: Container holding the menu content. It appears temporarily after the user activates a trigger and should remain visually connected to that trigger. It has 2 different main areas:
1. Quick actions area: (Optional) Area at the top of the menu used for a small set of high-priority actions. Quick actions use a compact layout and is displayed horizontally to save space.
2. Content area: The main area of the menu. It contains menu headers, groups, dividers, and menu items.
2. Group: Set of actions or selectable options in the menu, organized together because they share a related function or context. Group can include:
1. Menu item: A single interactive option within the menu. It can represent an action or a selectable option and consists of:
1. Selection indicator: An icon that highlights wether a selectable option is selected.
2. Leading visual: (Optional) An icon or visual element placed before the label. It can help users recognize the item faster or clarify the action.
3. Label: The text that describes the action or option. Labels should be short, clear, and easy to understand.
4. Trailing slot: (Optional) An optional area after the label that can contain supporting information or visual elements, depending on the menu item configuration.
2. Menu header: (Optional) A text label used to introduce or describe a group of menu items. It helps users understand the purpose of the options below.
3. Menu divider: (Optional) A separator used to create visual distinction between groups. Dividers should support hierarchy and scanability, not be used after every item.

---

Usage Guidelines

Use Menu when users need to access a compact set of contextual actions or make an immediate selection. Because menus are temporary surfaces, they should stay focused, predictable, and easy to scan on mobile screens.

When to use this component

• To show contextual actions when there is not enough space to display them directly.
• When a trigger can lead to several immediate actions, such as Edit, Share, Duplicate, or Delete.
• To let users select or switch an option that takes effect immediately, such as changing a view, status, account, or sorting mode.
• To group related secondary actions without competing with the primary action on the screen.
• When the list is short enough to remain scannable and does not require a full-screen selection experience.
• When quick actions need to be available from a compact temporary surface.

When not to use this component

• Do not use a Menu for primary actions. Place primary actions directly on the screen so users can find them quickly.
• Do not use a Menu as a form input. Use Select or a form-specific component instead.
• Do not use a Menu for long lists of options. Use a dedicated screen, bottom sheet, or searchable selection pattern instead.
• Do not use a Menu for filtering complex data.
• Do not use a Menu for actions that require explanation, confirmation, or multi-step input. Use a modal, bottom sheet, or dedicated flow instead.

---

Best Practices

---

General Component Behaviors

A Menu should behave like a temporary, contextual surface. It opens from a trigger, supports quick interaction, and closes once the user has made a choice or dismissed it.

Opening and closing the menu

A Menu opens from a trigger. The trigger should clearly communicate what kind of content the user can expect, either through its label, icon, or surrounding context. Triggers can be select inputs or buttons.

It closes when the user selects an item, taps outside the menu, activates the trigger again, or dismisses the current surface using the platform’s standard behavior.

Immediate response

Menu actions and selectable items should produce an immediate result. If a selection needs to be reviewed or saved later, use a form control instead.

Selection

Use selectable menu items variant when the menu represents a current value, such as the active account, selected sorting option, or current display mode. Show a selection indicator only when it helps users understand the current state.

Destructive actions

Use destructive menu items for actions that may remove data or create irreversible changes.

Grouping

Use groups to separate different kinds of actions or options. A group may include a header when the relationship between items is not obvious.

Placement

Place the menu close to its trigger when there is enough space and the relationship remains clear. When the menu would be clipped, difficult to reach, or too dense, consider using a bottom sheet or dedicated selection surface instead.

In case there should be a separation between trigger and menu, set a space-xs between the components.

---

States

Menu items use states to communicate interaction, availability, and selection.

• Default: The default state shows that the item is available and can be selected.
• Pressed: The pressed state appears while the user is actively touching the item. It provides immediate feedback that the interaction is being recognized.
• Disabled: The disabled state shows that an item is visible but temporarily unavailable. Use disabled items only when users benefit from knowing that the option exists. If the item is not relevant in the current context, consider removing it from the menu instead.

---

Variants

Action and Selection

• Action item: Use an Action item for commands that perform an immediate action, such as Edit, Share, Download, Duplicate, or Delete. Action items should clearly describe what will happen when selected.
• Selection item: Use a Selection item when the menu represents a set of options and one or more items can reflect the current value. Selection items are appropriate for immediate state changes, such as selecting a view mode, switching a context, or changing a sorting option.

Horizontal and vertical layouts

• Horizontal layout: Use the horizontal layout for standard menu content. It is best for lists of actions, selectable options, grouped items, and menus with headers or dividers.
• Vertical layout: Use the vertical layout for for compact quick actions, especially when items are short and benefit from being shown side by side. These items should be limited in number. Avoid using this layout for long labels or actions that require detailed reading.

---

Content Guidelines

Menu labels should be clear, short, and easy to act on. Users should be able to understand the result of each item before selecting it.

Action labels

• Start action labels with a verb such us Edit, Share, Duplicate, …
• Use specific labels when the action may affect sensitive or important information. Examples:
  Delete appointment, Remove patient, Cancel visit or Reschedule booking.

Selection labels

• Use nouns or short descriptive labels for selectable options. Examples: Newest first, Available today, My calendar, …
• Avoid making selection labels sound like commands unless the item performs an action immediately.

Header labels

• Use headers to describe the purpose of a group, not to repeat information already obvious from the items. Examples: Sort by, Calendar, Account, More actions, …
• Keep headers short and descriptive.

Destructive labels

• Use direct, explicit wording for destructive actions. Examples: Delete, Remove, Cancel appointment, Reset filters, …
• Avoid vague destructive labels like: Continue, Confirm, Apply, …

For further information, see the Content Styleguide.

---

Known Gaps