Menus

Menus display a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.

Overview

Menus are a Material Design component that provides contextual actions or navigation options. They can be triggered by buttons, icons, or right-click (context menu). Menus should contain at least two items and remain simple and scannable.

Live Preview

Brand Properties

The following table shows Menu properties with Material Design 3 defaults and brand-specific values.

Variants

• Dropdown Menu - Opens below trigger button
• Context Menu - Opens on right-click
• Overflow Menu - Three-dot icon trigger
• Cascading Menu - Submenus that expand horizontally
• Selection Menu - Shows checkmark on selected item

Menu Items

• Text only - Simple text label
• Icon + Text - Leading icon with label
• With Shortcut - Trailing keyboard shortcut hint
• With Submenu - Trailing chevron for nested menu
• Divider - Horizontal line to group items
• Disabled - Grayed out, non-interactive item

Behavior

• Opens near the trigger element
• Closes on item selection or outside click
• Escape key closes the menu
• Arrow keys navigate between items
• Enter key selects focused item

Accessibility

• Use role="menu" on the container
• Use role="menuitem" on each item
• Support arrow key navigation
• Use aria-haspopup="menu" on trigger
• Use aria-expanded to indicate open state
• Focus should return to trigger on close

Related Components

• Toolbars
• App Bar
• Dropdown (Select)