Loading pattern...

What is Context Menu?

A context menu is a popup menu that appears when users right-click (desktop) or long-press (mobile) on an element, showing actions relevant to that specific item. Like right-clicking a file to see "Open," "Rename," "Delete." It keeps primary UI clean while making secondary actions discoverable. Common in desktop apps, file managers, and complex web apps.

When Should You Use This?

Use context menus for secondary actions on items in lists, tables, or canvases where showing all action buttons would clutter the UI. Great for power users who learn keyboard shortcuts. However, don't rely on context menus for primary actions—many users (especially mobile) never discover right-click menus. Always provide alternative access to critical actions.

Common Mistakes to Avoid

  • Only access to important actions—primary actions should be visible, not hidden in right-click
  • No mobile alternative—long-press is less discoverable, show action buttons on mobile
  • Too many options—keep context menus under 10 items
  • No keyboard shortcuts shown—display shortcuts like "Delete (⌘D)"
  • Generic actions—menu should be contextual to what was clicked

Real-World Examples

  • Notion—right-click blocks for "Duplicate," "Delete," "Turn into"
  • Figma—context menu on canvas elements with relevant actions
  • Gmail—right-click emails for "Archive," "Mark as read," "Move to"
  • VSCode—right-click in editor for refactoring and code actions

Category

Navigation Patterns

Tags

menucontext-menuright-clickactionsui-pattern

Permalink