下拉菜单Dropdown
页面导航把一组相关操作收进同一个入口
也常被叫作操作菜单更多菜单
下拉菜单常把重命名、导出和删除等动作收进“更多”按钮。它装的是操作;如果用户只是从固定值中选择一个,应该使用选择器 Select。
容易混淆?这样区分
下拉菜单Dropdown≠选择器Select
下拉菜单 Dropdown 展开的是操作或导航;选择器 Select 用来选择并保存一个表单值。
什么时候用
- 一个入口带多个相关动作:「更多 ▾」更多操作重命名复制链接移动到…删除
- 用户头像下的账户菜单林个人主页账号设置退出登录
- 把低频操作收进「更多」,主界面更干净保存更多 ▾
- 带分组、快捷键的命令菜单保存 ⌘S另存为 ⇧⌘S导出 ⌘E
什么时候不用
- 只是从几个值里选一个 → 用 选择器 Select请选择城市 ▾北京上海深圳
- 菜单里只有一项 → 直接摆个按钮就行更多 ▾删除
- 把核心操作藏进下拉,用户根本找不到预览更多 ▾「发布」藏在更多里,没人找得到
- 下拉里套娃超过一层,手一抖全没了新建移动到 ▸删除项目 A项目 B
组成结构 · Anatomy
重命名
复制链接
删除
1触发器Trigger按钮或文字,点击展开菜单
2菜单面板Panel浮层,点击外部自动收起
3菜单项MenuItem一个动作,可带图标和快捷键
4分隔线Divider给菜单项分组,危险操作通常单独一组
常见变体 · Variants
基础菜单Basic
重命名复制链接删除
一组相关动作收进一个入口,默认款
带快捷键Shortcut
保存⌘S导出⌘E
高频操作顺手标上键盘快捷键
带分组Grouped
视图紧凑模式操作导出
菜单项多了,分组后找起来不费劲
典型使用场景
表格行「更多操作」
项目文件
📄 首页改版方案.fig2 小时前
···
📄 设计规范.md昨天
···
重命名
复制链接
删除
用户头像账户菜单
编辑器命令菜单
工具栏低频操作收纳