dragoon0x Contextual Menus
Types
| Type | Trigger | Use |
|---|---|---|
| Context menu | Right-click (desktop) | File operations, editing actions |
| Action menu | Click on ⋮ or ⋯ icon | Item-level actions |
| Dropdown menu | Click on button | Navigation, options |
| Command menu | Keyboard shortcut (Cmd+K) | Global search and actions |
Design Rules
- Group related actions with dividers
- Show keyboard shortcuts aligned right
- Destructive actions at bottom, visually distinct (red text)
- Max 10-12 items before grouping or restructuring
- Disabled items: show but gray out (don't hide)
- Icons optional but helpful for scanning
Positioning
- Open near the trigger, within viewport
- Flip if near edge of screen
- Submenu: opens to the right (or left if at right edge)
Accessibility
role="menu"on containerrole="menuitem"on each item- Arrow keys to navigate
- Enter/Space to select
- Escape to close
- Focus returns to trigger on close