- Guidelines
- React API Reference
- Blazor API Reference
Dropdown Menus display a list of actions or options when triggered by a button or other control. They provide a space-efficient way to present multiple choices without cluttering the interface.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use dropdown menus for presenting a list of actions or options related to a specific context. Ideal for commands that don’t need constant visibility. |
| Content | Group similar items together. Use clear, concise labels. Include icons when helpful. Show keyboard shortcuts when applicable. |
| Behavior | Position appropriately near the trigger. Close on selection, escape key, or outside click. Support keyboard navigation through items. |
| States | Provide clear visual feedback for hover, focus, and disabled states. Clearly indicate checked states and submenus. |
| Feedback | Highlight items on hover/focus. Provide immediate visual feedback when an item is selected. |
| Examples | Application settings, user account options, content manipulation actions, or view controls. |
Best Practices
- Logical Organization: Group related items and separate groups with dividers when appropriate.
- Consistent Positioning: Open in a predictable direction relative to the trigger (typically down and aligned to start or end).
- Limited Depth: Avoid deeply nested submenus which can be difficult to navigate.
- Descriptive Labels: Use clear, concise labels that indicate what the option does.
- Accessibility: Ensure keyboard navigability and proper ARIA attributes for screen reader support.
Do’s and Don’ts
Do
- Group related items together.
- Provide keyboard navigation support.
- Include visual indicators for checked or selected states.
- Position menus to avoid obscuring important content.
Don't
- Overload with too many options or deep nesting.
- Use for primary navigation that should always be visible.
- Rely solely on icons without labels unless meaning is universally clear.
- Create inconsistent behaviors across different dropdowns.
Additional Guidance
- Psychological Impact:
- Progressive Disclosure: Dropdown menus help manage complexity by showing options only when needed.
- Decision Management: Well-organized menus reduce cognitive load by grouping related choices.
- Interface Cleanliness: By hiding options until requested, dropdowns help maintain a cleaner, more focused interface.