跳到主要内容
前端术语库

UI 组件 · 浮层

右键菜单

Context Menu

也叫：上下文菜单、快捷菜单、右击菜单、Right-click Menu、Contextual Menu

在某个对象上点鼠标右键（手机上长按）时，在光标旁弹出的一列针对这个对象的操作，例如重命名、复制、删除。

点「标注」看每个部分叫什么。

怎么跟 AI 说

改成你的业务内容再发

给文件列表加右键菜单：在文件上点右键（手机上长按 500ms）时阻止浏览器默认菜单，在鼠标位置弹出一个宽 200px、白底带阴影的菜单，包含「打开」「重命名 F2」「复制链接」「移动到…」（带右箭头的二级菜单）、分隔线、红色的「删除」，快捷键右对齐、灰色。被右键的文件保持选中高亮。菜单靠近屏幕右边或底部时自动向左、向上翻转。点击菜单项执行后关闭，点击外部、滚动或按 Esc 也关闭，支持上下方向键选择。同样的操作也放进每个文件右上角的「⋯」按钮里。

发给

01判断

你的内容是这样吗？

对照两列，确认右键菜单是不是你要找的。

符合这些情况，用右键菜单

  • 网盘、文件管理、设计画布、在线表格这类用户习惯用右键操作的桌面场景
  • 对象很多、每个都有一组操作，不适合在每个对象上都摆一排按钮时
  • 给熟练用户提供一条比找按钮更快的捷径

是这些情况，换成别的

  • 普通网站和内容页面，用户不会想到去点右键

  • 某个操作只能通过右键找到，页面上没有任何按钮入口

  • 手机端的主要操作，长按不容易被发现，应该给出明显的按钮

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    删除、导出等操作只藏在右键菜单里，页面上没有任何按钮能找到

  2. 02

    整个页面都拦截了右键，用户想复制文字、在新标签页打开链接都做不到

  3. 03

    菜单在屏幕边缘弹出时不会翻转，一半被截在屏幕外面

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由触发区域（文件、画布、表格行等对象）和在光标位置弹出的菜单浮层组成，菜单里是操作项、快捷键提示、分隔线、二级菜单和危险操作。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1在光标位置弹出的带阴影小浮层，附近没有触发它的按钮
  2. 2浮层里是一列操作，右侧常有灰色快捷键，最后一项常是红色的删除
  3. 3被右键点中的对象（文件、表格行、图层）带有选中高亮

04解释

详细解释

右键菜单出现在鼠标点下的位置，里面只放和被点对象有关的操作：在文件上右键是「打开、重命名、复制链接、删除」，在画布空白处右键是「粘贴、全选、添加便签」，在表格行上右键是「编辑、复制行、删除」。点一项立即执行并关闭菜单，点别处或按 Esc 也会关闭。手机上用长按代替右键。

它和 下拉菜单 长得几乎一样，区别在怎么打开：下拉菜单挂在一个看得见的按钮上（「⋯」「更多」），点按钮才弹出；右键菜单没有按钮，在对象上按右键就在光标处出现，所以它是「藏起来的」，很多用户不知道它存在。它和 菜单栏 的区别：菜单栏是界面顶部一直在的一排菜单，收纳整个应用的命令；右键菜单只在点对象时临时出现，只放这个对象的操作。

右键菜单里的操作，页面上要有别的入口（例如行末的「⋯」按钮或工具栏），不能只放在右键里。它会替换浏览器自带的右键菜单，所以只在文件、画布、表格这类确实需要的区域启用，不要整页拦截。菜单靠近屏幕边缘时要自动往里翻，别被截掉。

开发者信息
术语 ID
component-context-menu
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • [data-slot="context-menu-content"]
  • .p-contextmenu
  • .contexify
  • .react-contextmenu
  • .v-contextmenu
  • .mx-context-menu
  • .context-menu-list
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • context-menu
  • contextmenu
  • ctx-menu
  • right-click-menu
  • rightclick-menu
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • ContextMenu
  • ContextMenuContent
  • RightClickMenu
语义标签和角色

弱信号，要和其他线索一起才算识别出来。

  • role=menu
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 浮在内容上
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30