Menu

🧭 When to Use a Menu

Use a Menu when:

• You need to display a compact set of actions or options

• The list of items is contextually tied to a trigger (e.g., clicking a profile icon or overflow button)

• You want to allow selection using checkboxes or radio buttons inside a flyout-style list

Avoid using Menus for long forms, complex multi-step flows, or navigation across major sections of an app.

🎨 Menu Types

Subtle – Low-contrast background with soft borders and hover states. Best for neutral or lightweight UIs.
Filled – Higher-contrast background and elevated styling. Ideal for primary or modal-style overlays where the Menu needs to stand out.

These styles are swappable via component variants in Figma.

🎯 Menu Statuses

Default – Idle state, visible but not interacted with.
Hover – Triggered when the cursor is over the Menu surface or items, indicating readiness for interaction.
Disabled – Non-interactive state for read-only or unavailable Menus. The component should be visibly dimmed and should not respond to hover or click.

States apply to the Menu as a whole, especially in contexts where the entire menu is shown conditionally (e.g. based on permissions or loading status).

🧩 Modifiers

Menus can accept different types of list items, controlled by a modifier setting:

• Default – Standard text item for navigation or commands

• Checkbox – Allows multiple selections within the Menu

• Radio Button – Allows single selection within grouped options

Modifiers are controlled via nested Menu Item components that inherit styling from the parent Menu container. These modifiers can be toggled in Figma using variants or instance swaps.

✏️ Subtext Support

Each Menu Item supports an optional Subtext layer property, which adds a secondary line of text beneath the main label.
This is ideal for:

• Describing settings

• Adding shortcuts

• Providing light context or guidance

You can toggle this subtext layer on or off inside the component without breaking structure.

♿ Accessibility Considerations

From a design perspective:

• Ensure menu items have at least a 44px hit area

• Maintain strong hover/focus contrast

• Use clear icons or visual indicators for checkboxes and radio groups

• Keep disabled states visibly distinct

From a code perspective (if implemented):

• Use proper role="menu" and role="menuitem" attributes

• For checkboxes and radio items, use aria-checked

• Support keyboard navigation (Arrow Up/Down, Enter, Esc)

• Ensure subtext doesn’t interfere with screen reader hierarchy

✅ Best Practices

• Keep menus short (ideally 5–8 items) to avoid scroll

• Use dividers or groups to break up related actions

• Don’t overload menus with destructive actions—separate them or use confirmation steps

• Position menus relative to the trigger using consistent spacing and padding tokens