composite pattern · Menus and navigation
Dropdown Menu
A button-triggered menu of commands or choices with managed keyboard navigation.
Decisive boundary
Do not use a menu to collect a form value when Select or Combobox semantics are expected.
Definition and intent
What is a Dropdown Menu UI pattern?
Use the behavior, not the silhouette
A button-triggered menu of commands or choices with managed keyboard navigation. The term is used here as a composite pattern made from multiple controls or regions that must work together. That distinction prevents a visual resemblance from silently deciding focus, keyboard, modality, or dismissal behavior.
Provide a compact set of actions from an explicit trigger. A good implementation preserves that job while making the trigger, open state, close path, and responsive behavior observable to users.
Know when the label is wrong
The fastest way to identify a pattern is often to reject the nearest alternative. For Dropdown Menu, the boundary is: Do not use a menu to collect a form value when Select or Combobox semantics are expected.
Do not implement it as Select for values, Navigation Menu for primary links, and Context Menu for object-context activation. If those requirements describe the real task better, use the related pattern page or the full Menus and navigation comparison before writing code.
Decision process
Decide before choosing a component
Record these requirements in plain language. A library component name is not a substitute for the contract.
Confirm the user job
Provide a compact set of actions from an explicit trigger.
Define opening and closing
A menu button activated by click, Enter, Space, or arrow key. Command activation, Escape, or outside interaction.
Specify access behavior
Moves among menu items using managed focus. Arrow keys navigate, Enter or Space activates, Escape returns to the trigger.
Reject the near miss
Select for values, Navigation Menu for primary links, and Context Menu for object-context activation.
Behavior contract
What must survive the build
- trigger
- A menu button activated by click, Enter, Space, or arrow key.
- dismissal
- Command activation, Escape, or outside interaction.
- modality
- Usually a transient menu surface, not a page-blocking dialog.
- focus
- Moves among menu items using managed focus.
- keyboard
- Arrow keys navigate, Enter or Space activates, Escape returns to the trigger.
- interactive
- Contains menu items representing commands, checks, or submenus.
- persistence
- Temporary while choosing a command.
- placement
- Anchored to a menu button.
- mobile
- Ensure large targets; consider a sheet only if the command set needs more room.
Failure modes
Common wrong builds
- Using links and commands without clear intent.
- Tabbing through every item instead of menu navigation.
- Labeling a Select as a dropdown menu.
Observable checks
Verify the result
- The trigger exposes its menu relationship.
- Arrow-key navigation works.
- Escape returns focus.
- Disabled items are conveyed.
- Items execute commands rather than silently changing a form value.
Coding-agent handoff
Implementation brief template
Pattern: Dropdown Menu Purpose: Provide a compact set of actions from an explicit trigger. Trigger: A menu button activated by click, Enter, Space, or arrow key. Dismissal behavior: Command activation, Escape, or outside interaction. Modality: Usually a transient menu surface, not a page-blocking dialog. Focus behavior: Moves among menu items using managed focus. Keyboard behavior: Arrow keys navigate, Enter or Space activates, Escape returns to the trigger. Interactive content: Contains menu items representing commands, checks, or submenus. Placement: Anchored to a menu button. Mobile behavior: Ensure large targets; consider a sheet only if the command set needs more room. Do not implement as: Select for values, Navigation Menu for primary links, and Context Menu for object-context activation. Acceptance checks: - The trigger exposes its menu relationship. - Arrow-key navigation works. - Escape returns focus. - Disabled items are conveyed. - Items execute commands rather than silently changing a form value.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Dropdown Menu UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Dropdown Menu in web UI?
A button-triggered menu of commands or choices with managed keyboard navigation. In this reference set it is a composite pattern made from multiple controls or regions that must work together.
When should I use a Dropdown Menu?
Provide a compact set of actions from an explicit trigger. The decisive boundary to confirm is this: Do not use a menu to collect a form value when Select or Combobox semantics are expected.
What keyboard and focus behavior does a Dropdown Menu need?
Arrow keys navigate, Enter or Space activates, Escape returns to the trigger. Moves among menu items using managed focus. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Dropdown Menu behave on mobile?
Ensure large targets; consider a sheet only if the command set needs more room. Its modality is a separate requirement: Usually a transient menu surface, not a page-blocking dialog.
How do I verify a Dropdown Menu implementation?
Start with observable checks: The trigger exposes its menu relationship. Arrow-key navigation works. Escape returns focus. Then verify the remaining checks and compare the result with the linked source guidance.