菜单
Menu
别名:菜单下拉菜单右键菜单上下文菜单操作菜单更多操作三个点点出来的菜单
这是什么
点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
名词辨析
菜单（Menu）是命令列表，点选即执行；导航（Navbar/Sidebar）是页面目的地；下拉（Dropdown）是「按钮 + 菜单」的组合控件。
交互实验室
试一试，再决定怎么用用鼠标与键盘选择动作，体验重命名、删除确认与撤销。
正在加载实验室…
使用时关注什么
- 01所有菜单项包括危险项都应可用键盘到达。
- 02点外部与 Esc 都能关闭，焦点不应丢失。
从参考到实践
AI 生成的视觉参考 · 点击查看完整图集
✓ 适用场景
- 收纳低频操作，避免界面堆满按钮
- 右键唤起的上下文操作（文件、画布元素）
- 顶部导航的站点栏目入口
✕ 不适用场景
- 高频主操作（直接露出按钮）
- 层级很深的树（改用侧边栏或命令面板）
- 破坏性操作需二次确认，不能一触即发
常见形式
下拉
Dropdown
点击按钮在下方弹出
上下文
Context
右键在指针位置弹出
分组
Grouped
带分组标题与分隔线
实现要点
position: absolutez-indexbox-shadowmin-width以触发器为锚 absolute 定位，默认下方展开，贴近屏幕边缘时翻转。菜单项用 button （role="menuitem"），↑↓ 循环、Enter 执行、Esc 关闭；危险项用红色文字并与常规项分隔。 点击外部关闭：document 监听 pointerdown 判断 target。
平台 API
role="menu"role="menuitem"横向对比
查看完整对比 →相关概念
由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
组件相似概念固定在页面顶部的水平导航条：左侧品牌标识，中间主导航链接，右侧搜索、 入口按钮与用户头像。它是网站的"门面导航"，把最重要的三到七个入口压进 一条横向空间，移动端折叠为汉堡菜单。常配合 position: sticky 在滚动时保持可见。
组件替代方案用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件相似概念点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件相似概念容易混淆
Dropdown 是按钮+菜单的完整控件，Menu 只是弹出的命令列表部分。
Navbar 跳转页面目的地，Menu 执行即时命令。
Select 选中一个值回填表单，Menu 触发一个动作。