- Guidelines
- React API Reference
- Blazor API Reference
Context menus provide contextual actions that appear when a user right-clicks (or performs an equivalent action) on an element. They offer a set of options relevant to the current context, allowing for efficient access to actions without cluttering the main interface.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use context menus for secondary or specialized actions related to a specific element. These actions should be contextually relevant to the item. |
| Content | Group similar actions together. Include icons when helpful. Use clear, concise action labels. Consider including keyboard shortcuts when applicable. |
| Behavior | Position near the trigger point without extending beyond screen boundaries. Support keyboard navigation. Close on selection, Escape, or outside click. |
| States | Provide clear visual feedback for hover, focus, and disabled states. Clearly indicate submenus and their activation. |
| Feedback | Highlight items on hover/focus. Provide immediate visual feedback when an action is selected. |
| Examples | Document editing actions, file management options, data row operations, or object-specific commands. |
Best Practices
- Contextual Relevance: Only include actions that are meaningful in the current context.
- Organization: Group related actions together and separate groups with dividers when appropriate.
- Consistency: Maintain consistent positioning, styling, and behavior across the application.
- Essential Actions: Include only the most relevant actions to avoid overwhelming users.
- Accessibility: Ensure keyboard navigability and proper ARIA attributes for screen reader support.
Do’s and Don’ts
Do
- Include only contextually relevant actions.
- Group related items together with logical separators.
- Provide keyboard navigation support.
- Include descriptive labels and helpful icons.
Don't
- Overload with too many options or levels of submenus.
- Include primary actions that should be visible in the main UI.
- Use as a replacement for main navigation.
- Create inconsistent behaviors across different contexts.
Additional Guidance
- Psychological Impact:
- Reduced Clutter: Context menus help maintain a clean main interface by tucking away secondary actions.
- Spatial Association: The proximity of the menu to the clicked element creates a strong mental connection between the item and its available actions.
- Expert User Support: Context menus are particularly valued by advanced users who appreciate efficient interaction patterns.