Menus show a list of options or actions for users to choose from. They help organize features and navigation in an interface.
Interactive element with proper ARIA attributes and keyboard support
ARIA menu role with proper keyboard navigation and focus management
Semantic menu items with appropriate roles and keyboard shortcuts
Using badges as menu triggers for dynamic identifiers and status indicators
Space-efficient pattern for presenting additional actions when horizontal space is limited
Minimal triggers with comprehensive accessibility labels and touch-friendly sizing
Combines primary action with related secondary actions in a cohesive interface
Use proper ARIA roles (menu, menuitem, menubar) and semantic HTML to convey structure to assistive technologies.
Full keyboard operability with arrow keys, Enter, Escape, and Tab following desktop application patterns.
Visible focus indicators, proper focus trap, and logical focus order that preserves user context.
role="menu"Container for menu items
aria-haspopup="true"Indicates trigger has popup
aria-expandedCurrent state of menu
aria-labelDescriptive menu purpose
44x44pxEnsures accessible touch targets for users with motor impairments
8px minAdequate spacing prevents accidental activation of adjacent items
Automatically adjusts menu position based on viewport constraints and scroll position
Gracefully degrades to touch-friendly interactions on mobile devices