Menu bars organize navigation and actions into horizontal menus with dropdown functionality, providing users with structured access to application features and commands.

​
Guidance

AspectBest Practice
UsageUse menu bars for primary navigation and grouping related actions logically.
ContentUse clear, concise labels for menu triggers and items. Group related actions within submenus.
BehaviorSupport keyboard navigation and provide visual feedback for hover and focus states.
StatesClearly indicate active menus, disabled items, and selected states for radio/checkbox items.
FeedbackUse appropriate icons and visual cues for different item types (checkboxes, radio buttons, submenus).
ExamplesApplication menu bars, toolbar menus, context-sensitive action menus.

​
Best Practices

  • Logical Grouping: Organize menu items into logical categories that match user mental models.
  • Consistent Labels: Use descriptive, action-oriented labels for menu items.
  • Keyboard Shortcuts: Include keyboard shortcuts where appropriate to improve accessibility.
  • Visual Hierarchy: Use separators and grouping to create clear visual hierarchy.
  • Responsive Design: Consider how menu bars adapt to different screen sizes.

​
Do’s and Don’ts

Do

  • Use clear, action-oriented labels for menu items.
  • Group related functionality together.
  • Provide keyboard shortcuts for common actions.
  • Support full keyboard navigation.

Don't

  • Overcrowd the menu bar with too many top-level items.
  • Use ambiguous or technical jargon in menu labels.
  • Hide critical functionality in deeply nested submenus.
  • Forget to indicate disabled or unavailable actions.

​
Additional Guidance

  • Psychological Impact:
    • Familiarity: Menu bars follow established patterns that users expect in applications.
    • Discoverability: Well-organized menus help users discover available features.
    • Efficiency: Quick access to commands through both mouse and keyboard interactions.