下拉菜单Dropdown
你可能会说
鼠标放到用户名上，往下展开“设置”“退出”几个选项。
下拉菜单是点击一个入口后展开一组相关操作的浮层菜单组件“更多”按钮可收纳重命名、导出和删除，减少页面占用。它承载操作；从固定值中选择一个答案应使用选择器 Select。
也常被叫作操作菜单更多菜单
容易混淆？这样区分
下拉菜单Dropdown≠选择器 Select
下拉菜单 Dropdown 展开的是操作或导航；选择器 Select 用来选择并保存一个表单值。
什么时候用
- 一个入口带多个相关动作：「更多 ▾」更多操作重命名复制链接移动到…删除
- 用户头像下的账户菜单林个人主页账号设置退出登录
- 把低频操作收进「更多」，主界面更干净保存更多 ▾
- 带分组、快捷键的命令菜单保存 ⌘S另存为 ⇧⌘S导出 ⌘E
什么时候不用
- 只需从几个值中选择一个：使用 选择器 Select请选择城市 ▾北京上海深圳
- 菜单中只有一项操作：直接使用按钮更多 ▾删除
- 把核心操作藏进下拉，会降低入口的可发现性预览更多 ▾核心发布操作藏在“更多”中，难以发现
- 多层嵌套下拉菜单容易因指针偏离而关闭，应改用分组或独立页面新建移动到 ▸删除项目 A项目 B
组成结构 · Anatomy
重命名
复制链接
删除
按钮或文字，点击展开菜单
浮层，点击外部自动收起
一个动作，可带图标和快捷键
给菜单项分组，危险操作通常单独一组
常见变体 · Variants
基础菜单Basic
重命名复制链接删除
一组相关操作需要共享同一个入口时
带快捷键Shortcut
保存⌘S导出⌘E
高频操作已定义键盘快捷键时
带分组Grouped
视图紧凑模式操作导出
菜单包含多类操作，需要按类别分组时
典型使用场景
表格行「更多操作」
项目文件
📄 首页改版方案.fig2 小时前
···
📄 设计规范.md昨天
···
重命名
复制链接
删除
用户头像账户菜单
编辑器命令菜单
工具栏低频操作收纳
延伸阅读 · 权威出处