- Guidelines
- React API Reference
Menu bars organize navigation and actions into horizontal menus with dropdown functionality, providing users with structured access to application features and commands.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use menu bars for primary navigation and grouping related actions logically. |
| Content | Use clear, concise labels for menu triggers and items. Group related actions within submenus. |
| Behavior | Support keyboard navigation and provide visual feedback for hover and focus states. |
| States | Clearly indicate active menus, disabled items, and selected states for radio/checkbox items. |
| Feedback | Use appropriate icons and visual cues for different item types (checkboxes, radio buttons, submenus). |
| Examples | Application 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.