ContextMenu
Right-click menu.
- Context Menu
- Context-Menu
- Action menu
- Command Menu
- Content Menu
- Fake Menu
- Hamburger Menu
- Menu
- Overflow Menu
- Contextual menu
- Dropdown button
- Dropdown Menu
- Menu button
- Menu list
- Options menu
- Overflow list
- Nested menu
- Right-click Menu
- Pop-up Menu
- Quick Actions
Overview
Purpose
The ContextMenu component right-click menu.within our design system. It follows our composer layer principles, ensuring consistency and reusability across applications.
When to Use
- Use when you need triggering user interactions
- Appropriate for actions contexts
- Follows composer component patterns
When Not to Use
- Avoid when simpler alternatives exist
- Don't use for navigation or form submission
- Consider alternatives for edge cases
Anatomy
Understanding the structure of the ContextMenu component helps ensure proper implementation and customization.
Anatomy documentation will be available once the component is implemented. The structure will follow our composer layer guidelines.
Variants & States
Interactive variants will be available once the component is implemented. Expected variants include standard states and visual variations.
API Reference
API documentation will be available once the component is implemented in ui/components/ContextMenu.
Accessibility
Standards Compliance
This component follows WCAG 2.1 AA guidelines and includes proper ARIA attributes, keyboard navigation, and screen reader support.
Common Pitfalls
- Not reachable via keyboard
- dismissal handling.
Accessibility Checklist
- ✓ Keyboard navigation support
- ✓ Screen reader compatibility
- ✓ Color contrast compliance
- ✓ Focus management
- ✓ ARIA attributes
- ✓ Reduced motion support
Usage Guidelines
✓ Do
- Use consistent spacing and sizing
- Follow established patterns
- Provide clear labels and descriptions
- Test with assistive technologies
✗ Don't
- Override core functionality
- Use without proper context
- Ignore accessibility requirements
- Modify without design system approval
Examples
Code examples will be available once the component is implemented. Examples will include basic usage, advanced patterns, and integration scenarios.