Context Menu
上下文菜单
WebDesktopMobile上手难度: 中等
在某个东西上点右键（手机上长按），弹出的那排操作选项。
Live Demo
真的可以点在这里点右键
你刚才看到的这个：浏览器里在链接上点右键弹出的菜单、桌面文件上右键的菜单、Notion 里选中一段文字右键的浮动格式菜单。
它到底是什么
Context Menu 是「只对这一个对象有效的操作」的集合。它的内容应该是上下文相关的——在图片上右键是「设为主图」，在文件名上右键是「重命名」。
右键菜单context menu快捷菜单次级菜单right click menu
Anatomy · 它由什么组成
Trigger触发点
右键 / 长按
Menu菜单容器
定位在鼠标位置
Item菜单项
高 32px，含图标 + 文字
Separator分隔线
分组危险操作
Shortcut快捷键
右侧显示 ⌘C 等
When to Use
什么时候该用 / 不该用| 情况 | 推荐 |
|---|---|
| 操作只针对特定对象 | 用 |
| 操作低频，放在主界面不划算 | 用 |
| 需要腾出主界面空间 | 用 |
| 这些操作是高频的 | 不用 |
| 这是移动端唯一入口 | 不用 |
移动端没有右键，长按唤出的菜单在系统层可能和浏览器默认菜单冲突。
菜单项超过 8 个就该考虑分组或换成别的形态。
Similar Patterns
别搞混一句话区分：在某个东西上点右键（手机上长按），弹出的那排操作选项。
怎么告诉 AI
三层 Prompt补上组件名和具体内容
在文件上点右键弹出菜单：复制 / 移动到… / 重命名 /（分隔线）/ 删除（红色，置底）。支持键盘上下移动。
不要只对 AI 说
Bad → Better不要这样对 AI 说
右键弹出菜单。
改成这样说
加 Context Menu：监听 contextmenu 并 preventDefault，Popover 定位到鼠标位置并做视口边缘翻转，role=menu/menuitem，↑↓/Enter/Esc 键盘可用，危险项用分隔线隔开并置底标红，右侧显示快捷键。
分享这张卡
社交平台友好把这个 Pattern 做成 3:4（小红书）或 1:1（X / Reddit）的知识卡片，在浏览器里直接导出 PNG，不需要后端。