适用：

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

不适用：

• 超过 3 层的多层级操作路径，届时应使用更稳定、操作区域更大的Modal

• 选择场景下应使用Select

通用原则

• 触发器可为任意可交互的控件，如文字，按钮等等

• 菜单的操作（单页内）数量建议不超过 15 个

• 危险选项通常位于选项列表的末尾，并在 Hover 状态下高亮显示为红色

• 多层级菜单最多 3 级，若超过须使用 Modal

类型

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

基础

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

多层级

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

• 菜单中的操作并非直接执行命令，而是起导航的作用

• 递进的形式帮助用户专注当前步骤

• 多层级菜单允许的流程较长

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

连级

• 属于多层级菜单的特定场景，用于 2 级的菜单（最多不超过 3 级）

• 它比多层级菜单更快速和轻量

• 当用户 hover 过次级条目后，用户若将光标移出容器范围外，容器需要继续保持可见

构成

1. Header（层级菜单时使用）

   1. 标题

      1. 动态显示当前内容对应的标题

      2. 必须显示完整，不允许折行

   2. 返回

      1. 进入二次菜单后显示

   3. 关闭

      1. 一直显示，点击后关闭整个菜单

2. 操作项列表

   1. 允许图标 + 文本或纯文本

   2. 允许带分组的结构化展示

   3. 允许展示属性值

   4. 允许增加额外的描述文字

   5. 当有下一层级时候，需显示箭头

3. 辅助信息（可选）

   1. 适合展示长期显示的固定信息，而非临时信息

      1. 不重要的信息：紧跟在操作项最后一个，用户滚动到最后可见。

      2. 重要的信息：可吸底，用户一直可见。

行为

菜单操作项三大状态

容器

• 出现：通过点击触发器来触发

• 滚动

  • 原则上菜单一屏最多展示 10 条可选项，超出则显示滚动条

  • 当菜单选项非常长的时候，允许左右滚动

• 关闭

  • 点击 Menu 外的区域

  • 再次点击触发器

  • 点击 Header 的关闭图标

多层级菜单

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

• 点击返回通常视为放弃，不提交数据

• 当用户在下一级操作完成时，菜单自动关闭（并非返回上一级）

连级菜单

• 在一级菜单被高亮后，用户将光标移至对应的二级菜单选项时，仍高亮一级菜单，作为视觉引导

• 点击菜单之外的区域将同时关闭所有菜单

• 默认向右侧展开次级选项列表，当空间不足时可向左侧展开。

---

布局