Skip to main content
Frontend Glossary

UI components · Overlays

Context Menu

Also called: Right-click menu, Contextual menu, Shortcut menu, Popup menu

A list of actions for an object that pops up next to the cursor when you right-click it (or long-press on a phone), like Rename, Copy, or Delete.

Click “Labeled” to see what each part is called.

How to tell AI

Swap in your own content first

Add a context menu to the file list. When a file is right-clicked (or long-pressed for 500ms on phones), block the browser's default menu and open a 200px-wide menu with a white background and a shadow at the mouse position. It contains "Open," "Rename F2," "Copy link," "Move to…" (a submenu with a right arrow), a divider, and a red "Delete," with shortcuts right-aligned in gray. Keep the right-clicked file highlighted. Near the right or bottom edge of the screen, flip the menu to open left or up. Close it after an item runs, or when the user clicks outside, scrolls, or presses Esc. Support up and down arrow keys. Also put the same actions in a "⋯" button at the top-right of each file.

Send to

01Decide

Does your content look like this?

Check both columns to confirm Context Menu is what you need.

Use Context Menu when

  • Desktop scenarios where users are used to right-clicking, like cloud drives, file managers, design canvases, and online spreadsheets
  • When there are many objects that each have a set of actions, and putting a row of buttons on every object doesn't work
  • Giving power users a shortcut that's faster than hunting for a button

Pick something else when

  • Regular websites and content pages, where users won't think to right-click

  • When an action can only be found by right-clicking and there's no button for it anywhere on the page

  • Main actions on mobile, where long-press is hard to discover. Give them a visible button.

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

  1. 01

    Hiding actions like Delete and Export only in the context menu, with no button anywhere on the page

  2. 02

    Blocking right-click on the whole page, so users can't copy text or open links in a new tab

  3. 03

    The menu doesn't flip when it opens near the screen edge, so half of it is cut off

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

A trigger area (an object like a file, canvas, or table row) and a menu panel that pops up at the cursor. The menu contains action items, shortcut hints, dividers, submenus, and destructive actions.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

A context menu shows up where the mouse was clicked and only holds actions for the thing you clicked. Right-click a file and you get "Open, Rename, Copy link, Delete." Right-click an empty spot on a canvas and you get "Paste, Select all, Add sticky note." Right-click a table row and you get "Edit, Duplicate row, Delete." Picking an item runs it right away and closes the menu. Clicking elsewhere or pressing Esc closes it too. On phones, long-press replaces right-click.

It looks almost identical to a Dropdown Menu. The difference is how it opens. A dropdown menu hangs off a visible button ("⋯" or "More") and only pops up when you click that button. A context menu has no button. You right-click the object and it appears at the cursor, so it's "hidden," and many users don't know it exists. How it differs from a Menubar: a menubar is a row of menus that's always at the top of the interface and holds the whole app's commands. A context menu only appears when you click an object and only holds that object's actions.

Every action in a context menu needs another way in on the page, like a "⋯" button at the end of each row or a toolbar. It can't live only in the right-click menu. It replaces the browser's own right-click menu, so only turn it on in areas that really need it, like files, canvases, and tables. Don't block right-click on the whole page. When the menu opens near the edge of the screen, flip it inward so it doesn't get cut off.

Developer info
Term ID
component-context-menu
DOM selectors

The extension matches these CSS selectors when it inspects a page locally (tags, ARIA roles, common component library classes).

  • [data-slot="context-menu-content"]
  • .p-contextmenu
  • .contexify
  • .react-contextmenu
  • .v-contextmenu
  • .mx-context-menu
  • .context-menu-list
Class keywords

Class names, ids and data-testid are split into words and matched in order, so page-header, PageHeader_root__x7a and pageHeader all become page, header.

  • context-menu
  • contextmenu
  • ctx-menu
  • right-click-menu
  • rightclick-menu
Component names

React / Vue component names read in development mode. Case-insensitive; library prefixes such as El, Ant and Mui are dropped.

  • ContextMenu
  • ContextMenuContent
  • RightClickMenu
Semantic tags and roles

A weak signal. It only counts together with other cues.

  • role=menu
Structure

Computed from how the element is laid out and styled. It only adds to the score and never decides on its own.

  • overlay
Priority
3 · when several match at the same level, the higher priority wins
Version
v2 · updated Sep 30, 2026