Comparison file · menus
Dropdown Menu vs Context Menu vs Navigation Menu
Distinguish commands, object-context actions, and persistent navigation.
Run the diagnosisFast decision
Start with the behavior that changes the build
Dropdown Menu
Do not use a menu to collect a form value when Select or Combobox semantics are expected.
Open field note ↗Context Menu
Provide an equivalent visible and keyboard-accessible path; pointer context cannot be the only route.
Open field note ↗Navigation Menu
A navigation menu is not automatically an ARIA menu. Native links and disclosures are often simpler.
Open field note ↗Behavior matrix
Compare contracts, not silhouettes
| Decision | Dropdown Menu | Context Menu | Navigation Menu |
|---|---|---|---|
| Primary purpose | Provide a compact set of actions from an explicit trigger. | Expose commands that apply to a specific object without occupying persistent space. | Help users understand and move through the product information architecture. |
| Trigger | A menu button activated by click, Enter, Space, or arrow key. | Right-click, context-menu key, Shift and F10, long press, or an equivalent visible button. | Persistent links or disclosure controls for nested destinations. |
| Value contract | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. | May be constrained or free-form; specify the policy. |
| Keyboard | Arrow keys navigate, Enter or Space activates, Escape returns to the trigger. | Must have a keyboard trigger and standard menu navigation. | Every destination and disclosure control is keyboard reachable. |
| Persistence | Temporary while choosing a command. | Temporary while selecting a command. | Primary structure remains available across pages. |
Discriminating questions
Ask only what changes the result
- Do the items navigate to places or execute commands?Navigate to places / Execute commands
- Is the menu opened from right-click, long press, or a specific object?Yes / No
Implementation consequences
Turn the comparison into a build decision
The final choice must explain both the selected contract and the alternatives it excludes.
Name the task
Distinguish commands, object-context actions, and persistent navigation. Write the user goal before choosing any component from a library.
Freeze the decisive dimensions
For this group, compare Primary purpose, Trigger, Value contract, Keyboard, Persistence. Do not allow visual similarity to replace those requirements.
State the exclusion
Record why the closest rejected pattern fails. That reason helps a coding agent avoid silently substituting a familiar but incompatible component.
Verify the behavior
Open the selected pattern reference, copy its acceptance checks, and test focus, keyboard, dismissal, placement, content, and mobile behavior in the real interface.
Frequently asked questions
Dropdown Menu vs Context Menu vs Navigation Menu questions
Direct answers based on the reviewed behavior contract above.
What is the main difference between Dropdown Menu, Context Menu, Navigation Menu?
Distinguish commands, object-context actions, and persistent navigation. The decisive dimensions on this page are Primary purpose, Trigger, Value contract, Keyboard, Persistence. Read each column as a behavior contract, not as a visual style recommendation.
How do I choose among Dropdown Menu, Context Menu, Navigation Menu?
Begin with the required user task, then answer the discriminating questions above. Choose the pattern whose purpose and behavior match the evidence, and explicitly reject alternatives whose focus, input, modality, persistence, or structural contract would break the task.
Can two of these terms apply to the same interface?
Sometimes. This taxonomy includes semantic patterns, composite patterns, presentation forms, behavior variants, message channels, and generic behavior labels. A presentation term and a semantic contract can coexist, so specify each required property instead of forcing every term into a flat either-or choice.
How should I verify the final implementation?
Open the selected pattern reference and run its observable checks. At minimum, confirm the configured trigger, dismissal, focus, keyboard behavior, interactive content, placement, and mobile adaptation. Also verify the linked official or first-party source against the library you ship.