适用：

  • 当选项 / 操作过多时，可使用菜单收纳操作选项，保持界面清晰整洁。

不适用：

  • 超过 3 层的多层级操作路径，届时应使用更稳定、操作区域更大的Modal
  • 选择场景下应使用Select，Menu是命令的集合。

通用原则

  • 触发器可为任意可交互的控件，如文字，按钮等等
  • 菜单的操作（单页内）数量建议不超过 15 个
  • 危险选项通常位于选项列表的末尾，并在 Hover 状态下高亮显示为红色
  • 多层级菜单最多 3 级，若超过须使用 Modal

类型

类型 描述
基础 仅有一级的普通菜单
多层级 部分条目含有多个层级，可在容器内前进/后退
连级 部分条目含有少于 3 个的层级，hover 连级条目时激活临时容器来承载后续条目

基础

点击菜单内操作后立即执行命令，菜单自动收起。
image.png

多层级

用法1: 菜单存在层级结构的时候

  • 菜单中的操作并非直接执行命令，而是起导航的作用
  • 递进的形式帮助用户专注当前步骤
  • 多层级菜单允许的流程较长

用法2: 点击菜单的操作后，需借助当前浮窗继续执行任务的时候
image.png

连级

  • 属于多层级菜单的特定场景，用于 2 级的菜单（最多不超过 3 级）
  • 它比多层级菜单更快速和轻量
  • 当用户 hover 过次级条目后，用户若将光标移出容器范围外，容器需要继续保持可见

image.png

构成

image.png

  1. Header（多层级菜单时使用）
    1. 标题
      1. 动态显示当前内容对应的标题
      2. 必须显示完整，不允许折行
    2. 返回
      1. 进入二次菜单后显示
    3. 关闭
      1. 一直显示，点击后关闭整个菜单
  2. 操作项列表
    1. 允许图标 + 文本或纯文本
    2. 允许带分组的结构化展示
    3. 允许展示属性值
    4. 允许增加额外的描述文字
    5. 当有下一层级时候，需显示箭头

行为

状态

image.png

容器

  • 出现：点击触发器触发
  • 滚动：
    • 原则上菜单一屏最多展示 10 条可选项，超出则显示滚动条
    • 当菜单选项非常长的时候，允许左右滚动
  • 关闭：
    • 点击 Menu 外的区域
    • 再次点击触发器
    • 点击 Header 的关闭图标

多层级菜单

点击菜单项，当前窗口直接进入下一级；点击返回，则回到上一级。

  • 点击返回通常视为放弃，不提交数据
  • 当用户在下一级操作完成时，菜单自动关闭（并非返回上一级）

连级菜单

  • 在一级菜单被高亮后，用户将光标移至对应的二级菜单选项时，仍高亮一级菜单，作为视觉引导
  • 点击菜单之外的区域将同时关闭所有菜单
  • 默认向右侧展开次级选项列表，当空间不足时可向左侧展开。

布局

image.png