Context Menu Design

Context menu design addresses right-click menus that provide contextual actions for selected items or clicked areas. Desktop users expect context menus for efficient access to relevant actions. Design systems must specify when context menus appear, what actions they contain, and how they present consistently across the application.

What Is Context Menu Design

Context menus appear when users right-click (or Ctrl-click on Mac) on elements, providing actions relevant to the clicked context. A file might show Open, Rename, Delete. Selected text might show Copy, Search, Define. The context determines available actions.

Context menus are more prominent on Windows than macOS, but both platforms support them. Users who rely on context menus expect them consistently throughout applications.

Design systems specify where context menus appear, what items they contain per context, and how they integrate with other application patterns.

How Context Menu Design Works

Context determination defines what context menu appears for different click targets. Different elements show different menus based on their nature and current state.

Context Menu Patterns:

Text Selection Context:
- Cut
- Copy
- Paste
- ---
- Look Up "..."
- Search with Google
- ---
- Select All

File/Item Context:
- Open
- Open With > [submenu]
- ---
- Rename
- Move to...
- Duplicate
- ---
- Delete

List Item Context:
- Edit
- Duplicate
- ---
- Move Up
- Move Down
- ---
- Delete

Empty Area Context:
- New Item
- Paste
- ---
- Sort By > [submenu]
- View Options > [submenu]

Design Considerations:
- Relevant actions only (no generic padding)
- Logical grouping with separators
- Keyboard shortcuts shown
- Disabled items when action unavailable
- Submenus for grouped options
- Position to avoid screen edge clipping

Item organization groups related actions with separators. Destructive actions typically appear last. Most common actions appear first for quick access.

Keyboard shortcuts display alongside menu items. Users can learn shortcuts by seeing them in context menus, enabling future keyboard-only access.

State-dependent items enable or disable based on context. Cut is disabled when nothing is selected. Paste is disabled when clipboard is empty.

Position handling ensures menus appear fully on screen. Menus appearing near screen edges should flip to remain visible.

Key Considerations

• Context-appropriate actions only
• Logical grouping with separators
• Keyboard shortcuts displayed
• Disabled state for unavailable actions
• Submenu organization for complex options
• Screen edge positioning
• Accessibility for keyboard and screen reader

Common Questions

What actions belong in context menus?

Actions relevant to the clicked element belong. A photo should show image-relevant actions. A text field should show text-relevant actions.

Common actions appear even if elsewhere. Copy and Paste might be in Edit menu but should also be in context menu where expected.

Destructive actions should be available but not prominent. Delete or Remove actions often appear at bottom with separator.

Avoid menu padding. Do not add actions just to fill the menu. Short, relevant menus are better than long generic ones.

How should context menus handle keyboard navigation?

Arrow keys navigate items. Up/down moves between items. Right opens submenus. Left closes submenus.

Letters jump to items. Pressing a letter jumps to items starting with that letter.

Enter/Return activates. The focused item activates with Enter.

Escape closes. Menu closes without action on Escape.

How do mobile context menus differ?

Long-press triggers context menus on mobile. Right-click does not exist on touch devices.

iOS context menus appear through long-press or 3D Touch. Previews may accompany menus.

Android context menus also use long-press. Floating action buttons provide alternative for common actions.

Touch targets must be larger. Menu items need adequate touch target size when context menus appear on touch-enabled desktops.

Summary

Context menu design provides right-click access to contextual actions throughout desktop applications. Menus should contain only relevant actions, organized logically with separators. Keyboard shortcuts displayed in menus teach users efficient alternatives. State-dependent enabling/disabling prevents confusion about action availability. Design systems should specify context menu contents per element type and ensure consistent implementation across the application.