# 下拉菜单 下拉菜单是展开的一系列动作或操作列表。 ## 使用规则 当页面上的操作命令过多时，可以使用下拉菜单收纳操作命令。 ## 组成要素 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4676011224214741ea15282ff40d2532_5nUQcigtT2.png?height=608&lazyload=true&maxWidth=800&width=2048) 1. **触发区域：** 通常是按钮、 Icon、或文本内容，作为鼠标悬停或点击时的触发区域 1. **菜单内容：** 展示下拉菜单的菜单内容 1. **父级菜单项：** 有从属关系的父级菜单项，通常每个选项都包含文本内容和下级展开箭头 1. **子级菜单项：** 有从属关系的子级菜单项 1. **容器背景：** 用于承载该下拉菜单的容器背景 ## 控件类型 ### 类型总览 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4e551e987391d85fb511dc6bbc57c935_mr48h1m5Fc.png?height=1944&lazyload=true&maxWidth=800&maxWidth=800&width=2048) #### 基础下拉菜单 用户通过点击或鼠标悬停触发区域可以打开下拉菜单，点击下拉菜单的某一个条目完成操作。触发区域通常为页面中的固定元素，例如图标按钮。 #### 包含级联菜单 当下拉菜单中部分条目有明确的从属关系时，建议使用级联菜单收纳条目，使父级菜单更清晰易读。 级联菜单通过 Hover 呼出，通常情况下不建议父级菜单的条目超过 13个。 子级菜单的标题应尽量简洁清晰。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/b7497ee7c648efa931cb4a6cde55a80e_b5WMN8ZEnQ.png?height=888&lazyload=true&maxWidth=800&maxWidth=800&width=2048) #### 包含辅助标题 当触发区域（如：图标按钮）无法清晰说明菜单内容时，可以使用菜单标题辅助说明菜单内容。标题应尽量简洁，内容不超过一行。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/22f43c9fdb9a3b3fcd2c87212c40dd3d_gipVkpO0ro.png?height=512&lazyload=true&maxWidth=800&width=2048) #### 包含分组 - 尽量使用分割线来对菜单内容进行分组，推荐使用通栏分割线。 - 不推荐使用分组标题，当需要展示分组标题时，优先考虑使用级联菜单。若场景需要添加分组标题，也需要避免和菜单标题同时使用的情况。
#### 动态下拉菜单 动态下拉菜单指菜单条目数量可以动态变化，可通过手动添加或加载更多实现 手动添加条目时通常会触发弹窗 Dialog 或气泡卡片 Popover 进行创建，可根据场景定义 动态下拉菜单的菜单高度建议遵循下拉菜单的最大高度设计，当内容超出最大高度时，使用滚动条对动态变化内容进行滚动展示 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/82669c7412c45afa5c4d33e12340b314_201i4pcc8n.png?height=1098&lazyload=true&maxWidth=800&width=2048) #### 菜单项包含复杂信息 - 基于实际需求，菜单项中可以出现图标、辅助说明文本、操作等。 - 当需要强调功能和用户重要操作时建议使用图标，同一层级的图标使用个数建议不超过 7 个。 - 当需要强调操作的重要性（如不可逆的删除操作），可以考虑使用有颜色的图标。 - 菜单项尺寸遵循通用样式规则设计，元素间距遵循 4N 原则。 #### 上下文菜单 上下文菜单的触发元素通常不是页面的固定元素，多通过鼠标右键点击触发 上下文菜单通常展示的是一组快捷操作。该操作集合需要在系统其他固定区域也可以找到 上下文菜单的层级不宜过深，若需要包含级联菜单，最多不超过两层 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/861369cb4443067c167e0df363e4e59f_luBkO33GkX.png?height=858&lazyload=true&maxWidth=800&width=2048) ## 通用样式规则 ### 尺寸说明 **注意事项**：![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/aa3cefadf1a37ef93bcb824db276e7a2_rb7HBb9VhS.png?height=1882&lazyload=true&maxWidth=800&width=2048) #### 下拉菜单尺寸 **触发区域：** 触发区域与下拉菜单间距 4px **列表样式：** 列表圆角 Radius-S。投影 shadow-M-down **内容间距：** 菜单内容距离上下间距 8px，分割线与菜单项间距 4px **级联菜单：** 父级与子级菜单左右间距为 0，边缘重合。父级菜单项与子级菜单内容顶部对齐 **列表宽度：** - 建议按照左右 padding=12px 进行自适应，取内容最长的菜单项计算宽度，最大宽度不超过 420px - 建议文本类的下拉菜单最小宽度为 55px - 根据实际场景，可自行设定下拉菜单固定宽度，宽度为4的倍数。文本内容超出部分进行省略 **列表高度：** 通常建议展示下拉菜单完整信息。当需要限制菜单高度时，建议不超过 480px，内容超出最大高度时支持滚动（鼠标移入出现滚动条） **分割线：** 建议使用通栏分割线对不同类型的菜单内容进行分隔，分割线上下与选项分别间距 4px ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/6fc9784482a1fc8f0dbff5151e98a4a0_58B2ACAe2c.png?height=2508&lazyload=true&maxWidth=800&width=2048) ### 最小宽度 - 优化的 Dropdown 最小宽度为 55px，以两个汉字操作为准拟定宽度 - 当设定最小宽度后不影响 Dropdown 原本的根据内容自适应逻辑 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/720f2421012731f935c1a5f569ac384e_Ybt1LcXWb2.png?height=218&lazyload=true&width=500) **场景说明** ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/3249a7e2152c72bd34ff67092b1c40d1_zRHQJkaOAN.png?height=218&lazyload=true&width=500) | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/d0ef0af84492a51d8d4d6464022392e2_ZaF5FrlxV1.png?height=218&lazyload=true&width=500) ---|--- ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/f280964f6dabb16bf6ea6801799276a3_3hYp5rFRao.png?height=20&lazyload=true&width=800)
**正确：**
设定最小宽度后仍可扩展自适应 | ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5d576ae0cad45457a2c92e8b32194543_EWbyDet7Zc.png?height=20&lazyload=true&width=800)
**避免：**
因设定最小宽度导致操作被省略 ### 位置说明 #### 常规 触发区域通常为页面中的固定元素（例如按钮、图标按钮等），下拉菜单的出现位置与触发区域在页面中的位置有关： - 下拉菜单的出现位置优先考虑与触发区域左对齐、向下展开。当右侧空间不足时，可以与触发区域右对齐、向下展开。当下侧空间不足时，可以向上展开 - 当向上、向下展开菜单会对页面中其他重要元素造成遮挡时，下拉菜单可以与触发区域顶对齐或底对齐，向左或向右展开（根据页面空间决定）。优先考虑顶对齐，向右展开 下拉菜单与页面的安全边距为 16px ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/4ad51038982431f02d608966eb55e277_I2LvXYlcTR.png?height=984&lazyload=true&maxWidth=800&width=2048) #### 包含级联菜单 子级菜单的出现位置优先考虑向右向下展开。当右侧空间不足时，子级菜单可以向左展开。当下侧空间不足时，可以向上展开。 子级菜单的空间位置高于父级菜单。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/dc7880318e2732ee986fb49e50efed64_7sc7mmp0VE.png?height=1114&lazyload=true&maxWidth=800&width=2048) 极端情况下，若页面上下或左右空间受限，无法满足使子级菜单按照以上对齐方式展开，可以使菜单与右侧或底部安全距离边缘对齐。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/616d4ae8990e101ef6cd44e51c6f46a4_rkFy0cy2Ur.png?height=894&lazyload=true&maxWidth=800&width=2048) #### 上下文菜单 Contextual Menu 上下文菜单的出现位置在页面中不固定，依赖于鼠标的触发位置，展示在鼠标的旁边 上下文菜单出现位置的顺序遵循常规的下拉菜单规则，优先向右向下展开 需要特化的规则为，当底部空间不足时，上下文菜单与底部安全距离边缘对齐，而非与鼠标底部对齐 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/efe4e76e65876b7742dce8cc47b0f4fc_3ITDXrrAry.png?height=1012&lazyload=true&maxWidth=800&width=2048) ### 交互说明 触发规则参考：优先使用悬停触发，降低用户的触达成本。 **悬停触发：** - 鼠标悬停在目标元素的触发区域上 300ms 后，下拉菜单出现，触发区域表现为 Active 状态 - 鼠标移出触发区域 300ms 后、或点击菜单项执行命令后，下拉菜单消失 - 下拉菜单出现后也作为触发区域，鼠标移入时，内容不消失 **点击触发：** - 鼠标点击目标元素后，下拉菜单出现，触发区域表现为 Active 状态 - 鼠标点击触发区域外的位置、或点击菜单项执行命令后，下拉菜单消失 **加载中：** - 使用 Spin 加载，遵循 Loading 加载规范 - 加载中的下拉菜单与加载完成的下拉菜单宽度一致 **已选状态：** - 已选状态的菜单项在下拉菜单中较少使用，通常应用于子级菜单中、需要展示当前有效的属性 - 当需要对下拉内容进行选择，选择内容会反馈在触发区域时，应该考虑使用下拉选择 Select 组件 **级联菜单：** - 鼠标移入父级条目时展开子级菜单 - 鼠标移入子级菜单时，父级条目的 Hover 状态仍然保持 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/32798693e9f481b0a99b8744524eb88c_LuNELhG6ZZ.png?height=1782&lazyload=true&maxWidth=800&width=2048) ### 触发菜单项 分为以下 4 种类型： 1. 左侧图标按钮菜单项 1. 右侧图标按钮菜单项 1. 文字按钮菜单项 1. 组合按钮下拉菜单
**尺寸：**
根据按钮尺寸标准 **状态：**
根据按钮状态标准 **使用说明：**
包含图标的触发菜单通常用作一组类似操作的收起，如：新建-普通表格/多维表格/图片。 组合按钮的触发菜单通常用于一个主要操作和一组次要操作的收起，如：提交-保存/提交并继续。 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/5dc35ce07d3d26387f5eb8a9088abec7_OTnRmujueo.png?height=1738&lazyload=true&maxWidth=800&width=2048) ## 组件对比说明 **下拉菜单 Dropdown 与 气泡卡片Popover** - Dropdown：下拉菜单展示的是一系列操作或动作，多为菜单列表 - Popover：气泡卡片承载的内容可以更加复杂（包括图片、表单等），除了操作外更注重信息内容的展示
**下拉菜单Dropdown 与 下拉选择 Select** - Dropdown：下拉菜单的列表项为跳转或操作，点击后执行一个命令，触发区域通常无变化 - Select：下拉选择的列表项为备选选项，点击后进行选择，选择结果通常会反馈在触发区域
**下拉菜单Dropdown 与 级联选择 Cascader** - Dropdown：下拉菜单可以包含级联操作，用于收纳一部分存在父子关系的条目。点击后执行一个命令，触发区域通常无变化 - Cascadar：级联选择的内容多为有清晰层级结构的数据集。点击后进行选择，选择结果通常会反馈在触发区域 ![](//sf3-cn.feishucdn.com/obj/open-platform-opendoc/c83873a265ce791b3ca1f2c8c01f336e_ue1VvHPnBL.png?height=954&lazyload=true&maxWidth=800&width=2048)