composite pattern · Menus and navigation
Navigation Menu
A structured set of links that helps users move through the primary destinations of a site or application.
Decisive boundary
A navigation menu is not automatically an ARIA menu. Native links and disclosures are often simpler.
Definition and intent
What is a Navigation Menu UI pattern?
Use the behavior, not the silhouette
A structured set of links that helps users move through the primary destinations of a site or application. 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.
Help users understand and move through the product information architecture. 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 Navigation Menu, the boundary is: A navigation menu is not automatically an ARIA menu. Native links and disclosures are often simpler.
Do not implement it as Dropdown Menu for command actions and Context Menu for object-specific commands. 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
Help users understand and move through the product information architecture.
Define opening and closing
Persistent links or disclosure controls for nested destinations. Nested surfaces close on selection, Escape, focus movement, or outside interaction according to design.
Specify access behavior
Uses normal link focus or a documented composite navigation model. Every destination and disclosure control is keyboard reachable.
Reject the near miss
Dropdown Menu for command actions and Context Menu for object-specific commands.
Behavior contract
What must survive the build
- trigger
- Persistent links or disclosure controls for nested destinations.
- dismissal
- Nested surfaces close on selection, Escape, focus movement, or outside interaction according to design.
- modality
- Non-modal navigation structure.
- focus
- Uses normal link focus or a documented composite navigation model.
- keyboard
- Every destination and disclosure control is keyboard reachable.
- interactive
- Contains navigation links and optional disclosure controls, not arbitrary app commands.
- persistence
- Primary structure remains available across pages.
- placement
- Header, side navigation, or another persistent navigation region.
- mobile
- May collapse behind a menu button while preserving destination hierarchy.
Failure modes
Common wrong builds
- Applying desktop menubar keyboard rules to ordinary site links without need.
- Mixing navigation and destructive commands.
- Hiding the current destination.
Observable checks
Verify the result
- Links have meaningful text.
- Current location is conveyed.
- Nested items are keyboard accessible.
- Mobile navigation can open and close without trapping users.
- Navigation remains understandable without hover.
Coding-agent handoff
Implementation brief template
Pattern: Navigation Menu Purpose: Help users understand and move through the product information architecture. Trigger: Persistent links or disclosure controls for nested destinations. Dismissal behavior: Nested surfaces close on selection, Escape, focus movement, or outside interaction according to design. Modality: Non-modal navigation structure. Focus behavior: Uses normal link focus or a documented composite navigation model. Keyboard behavior: Every destination and disclosure control is keyboard reachable. Interactive content: Contains navigation links and optional disclosure controls, not arbitrary app commands. Placement: Header, side navigation, or another persistent navigation region. Mobile behavior: May collapse behind a menu button while preserving destination hierarchy. Do not implement as: Dropdown Menu for command actions and Context Menu for object-specific commands. Acceptance checks: - Links have meaningful text. - Current location is conveyed. - Nested items are keyboard accessible. - Mobile navigation can open and close without trapping users. - Navigation remains understandable without hover.
Claim-level references
Sources, not a confidence score
Frequently asked questions
Navigation Menu UI pattern questions
Direct answers based on the reviewed behavior contract above.
What is a Navigation Menu in web UI?
A structured set of links that helps users move through the primary destinations of a site or application. In this reference set it is a composite pattern made from multiple controls or regions that must work together.
When should I use a Navigation Menu?
Help users understand and move through the product information architecture. The decisive boundary to confirm is this: A navigation menu is not automatically an ARIA menu. Native links and disclosures are often simpler.
What keyboard and focus behavior does a Navigation Menu need?
Every destination and disclosure control is keyboard reachable. Uses normal link focus or a documented composite navigation model. These statements describe the reviewed expectation, but the final implementation still needs testing in the component library and browser you ship.
How should a Navigation Menu behave on mobile?
May collapse behind a menu button while preserving destination hierarchy. Its modality is a separate requirement: Non-modal navigation structure.
How do I verify a Navigation Menu implementation?
Start with observable checks: Links have meaningful text. Current location is conveyed. Nested items are keyboard accessible. Then verify the remaining checks and compare the result with the linked source guidance.