Context Menu
上下文菜单
The row of actions that pops up when you right-click something (or long-press it on a phone).
Live Demo
Actually clickableRight-click here
What you just saw:The browser menu on a right-clicked link, the menu on a right-clicked desktop file, the floating formatting menu that appears over selected text in Notion.
What it actually is
A context menu collects "operations that only apply to this one object". Its contents should genuinely depend on the context — right-clicking an image offers "Set as cover photo", right-clicking a filename offers "Rename".
Anatomy · What it's made of
Trigger触发点
Right click / long press
Menu菜单容器
Positioned at the pointer
Item菜单项
32px tall, icon + label
Separator分隔线
Groups dangerous actions apart
Shortcut快捷键
Shown right-aligned, e.g. Command-C
When to Use
When it fits, and when it doesn't| Situation | Use it? |
|---|---|
| The actions apply only to a specific object | Yes |
| The actions are low-frequency and not worth main-surface space | Yes |
| You need to keep the main interface clear | Yes |
| These actions are high-frequency | No |
| It is the only entry point on mobile | No |
Mobile has no right click, and a long-press menu can collide with the system or browser default menu at the system layer.
Past about eight items you should group them or choose a different form.
Similar Patterns
Don't mix these upContext MenuCurrent
上下文菜单
The row of actions that pops up when you right-click something (or long-press it on a phone).
Long Press
长按
Hold a finger down for about half a second and a row of options appears, or multi-select mode starts.
In one line:The row of actions that pops up when you right-click something (or long-press it on a phone).
Long Press
长按
Hold a finger down for about half a second and a row of options appears, or multi-select mode starts.
Popover
浮出层
A small panel that pops out next to a particular element, visually tethered to the thing that opened it.
Select
下拉选择器
A box that opens downward into a list of options and collapses again once you pick one.
How to tell AI
Three levels of promptAdd the component name and specifics
Right-click a file to open a menu: Copy / Move to… / Rename / (separator) / Delete (red, at the bottom). Support keyboard navigation up and down.
Don't just say this to AI
Bad → BetterDon't say this to AI
Right click pops up a menu.
Say this instead
Add a Context Menu: listen for contextmenu and preventDefault, position the Popover at the pointer with viewport-edge flipping, use role=menu/menuitem, make Up/Down/Enter/Esc work, isolate dangerous items behind a separator at the bottom in red, and show shortcuts on the right.
Share this card
Social-readyTurn this pattern into a 3:4 or 1:1 knowledge card and export it as PNG right in the browser. No backend needed.