切换·Esc 返回

下拉菜单Dropdown

页面导航
把一组相关操作收进同一个入口
也常被叫作操作菜单更多菜单

下拉菜单常把重命名、导出和删除等动作收进“更多”按钮。它装的是操作;如果用户只是从固定值中选择一个,应该使用选择器 Select

容易混淆?这样区分
下拉菜单Dropdown选择器Select

下拉菜单 Dropdown 展开的是操作或导航;选择器 Select 用来选择并保存一个表单值。

什么时候用

  • 一个入口带多个相关动作:「更多 ▾」
    更多操作
    重命名复制链接移动到…删除
  • 用户头像下的账户菜单
    个人主页账号设置退出登录
  • 低频操作收进「更多」,主界面更干净
    保存更多 ▾
  • 分组、快捷键的命令菜单
    保存 ⌘S另存为 ⇧⌘S导出 ⌘E

什么时候不用

  • 只是从几个值里选一个 → 用 选择器 Select
    请选择城市 ▾
    北京上海深圳
  • 菜单里只有一项 → 直接摆个按钮就行
    更多 ▾
    删除
  • 核心操作藏进下拉,用户根本找不到
    预览更多 ▾
    「发布」藏在更多里,没人找得到
  • 下拉里套娃超过一层,手一抖全没了
    新建移动到 ▸删除
    项目 A项目 B
组成结构 · Anatomy
1触发器Trigger按钮或文字,点击展开菜单
2菜单面板Panel浮层,点击外部自动收起
3菜单项MenuItem一个动作,可带图标和快捷键
4分隔线Divider给菜单项分组,危险操作通常单独一组
常见变体 · Variants
基础菜单Basic
一组相关动作收进一个入口,默认款
带快捷键Shortcut
高频操作顺手标上键盘快捷键
带分组Grouped
菜单项多了,分组后找起来不费劲
典型使用场景
表格行「更多操作」
项目文件
📄 首页改版方案.fig2 小时前 ···
📄 设计规范.md昨天 ···
用户头像账户菜单
工作台 🔔
编辑器命令菜单
未命名文档.md B I
工具栏低频操作收纳
周报 · 第 29 期