下拉菜单
Dropdown
别名:下拉菜单下拉选项更多菜单操作菜单溢出菜单三个点菜单
这是什么
由触发按钮就近弹出的一组操作菜单，用于收纳次要操作，保持界面整洁。 典型形态是「···」更多按钮；面板带阴影浮于内容之上，点击菜单项即执行并关闭， 危险操作以红色项与分隔线隔离。
名词辨析
Dropdown 是「触发按钮 + 弹出菜单」的组合；Select 是表单取值控件；Popover 可承载任意内容而非仅命令。
交互实验室
试一试，再决定怎么用打开操作菜单，用方向键选择重命名或删除，尝试撤销。
正在加载实验室…
使用时关注什么
- 01选择动作后关闭菜单，焦点返回触发按钮。
- 02删除需要清楚的确认与可理解的恢复方式。
从参考到实践
AI 生成的视觉参考 · 点击查看完整图集
✓ 适用场景
- 次要操作较多但不值得常驻展示
- 列表行的行内操作收纳进「···」按钮
- 工具栏空间有限，需要折叠操作集
✕ 不适用场景
- 高频主要操作，直接放按钮更高效
- 需要在多项输入间选择并提交，用下拉选择
- 触屏端深度超过一层的嵌套菜单，改为抽屉或页面
常见形式
更多按钮
More button
「···」触发的行内操作集
悬停展开
Hover
指针悬停即展开，适合桌面导航
带图标与分隔
With icons & divider
图标辅助识别，危险项用分隔线隔离
实现要点
position: absolutez-index: 10box-shadowtransition面板绝对定位于触发器下方，展开做轻微 opacity + translateY 过渡（时长乘 --demo-speed）。role="menu" / role="menuitem" 标注，键盘上下移动、 Escape 关闭、点击外部关闭。危险项用红色文字并以分隔线隔离， 防止误点。触发器展开时保持高亮态。
平台 API
role="menu"role="menuitem"aria-haspopup代码里叫什么
同一控件在不同体系里的叫号——用对名字，Prompt 和检索才准。
| 体系 | 名称 |
|---|---|
| ARIA APG | Menu Button |
| shadcn/ui | DropdownMenu |
| MUI | Menu |
| AntD | Dropdown |
横向对比
查看完整对比 →相关概念
点击或右键触发的临时操作列表浮层：平铺或分组的命令项，选中即执行并关闭。 用于收纳非高频操作（更多、设置、删除），通常以「⋯」按钮或右键唤起。
组件相似概念点击触发元素后在其旁边弹出的非模态浮层，可承载文字说明、小型表单、日期选择等中等复杂内容。 无遮罩、不阻断页面其余部分，点击外部区域或 Esc 即关闭。
组件相似概念用快捷键（⌘K / Ctrl+K）唤出的浮动搜索面板：输入即筛选命令、页面或内容， 键盘上下选择、回车执行。macOS Spotlight 把它带入大众视野， 现在是效率工具和开发者产品的标配。
组件替代方案用收起的单行控件承载一组互斥选项，点击展开面板后选择其一，选中值常驻显示在触发器上。 比 radio 更省空间，适合选项多于 5 个的场景；面板支持滚动、分组或搜索，选择即关闭。
组件相似概念覆盖在页面之上、带半透明遮罩的对话框，打断用户当前流程，要求先完成弹窗内的任务或决策。 遮罩阻断与底层页面的交互，焦点被暂时困在弹窗内，是容器类浮层中打断程度最高的一种。
组件相似概念容易混淆
Menu 只是弹出列表，Dropdown 含触发按钮与关闭逻辑。
Select 用于表单取值，Dropdown 用于执行命令。
Popover 内容任意、可交互，Dropdown 列表为命令项。