跳到主要内容

Dropdown 下拉菜单

页面上的命令过多时,可将备选命令收纳到向下展开的浮层容器中。


按钮下拉

文字下拉

图标下拉

带图标的下拉面板

带国家的下拉面板

带多选的下拉面板

带分组的下拉面板

当下拉菜单中命令超出 10 个时,或浮层内出现滚动条,建议对命令进行分类。

可以直接使用分割线进行分类,如场景需要明确分组类目可以增加分组标题。

多级选择的下拉面板

当操作命令有多个层级时,悬浮在父级上,显示子级的菜单祥。

带搜索的下拉菜单

当操作命令多于 25 个时,建议支持搜索功能,快速找到指定的相关内容。

交互状态

下拉选择器状态

下拉面板状态

何时使用

  • 在导航菜单中:通过下拉菜单,可以将产品导航进行分组,并且统一放置在一起。
  • 在部分操作集合中:比如在表格的操作区域,经常会使用下拉菜单将多项操作放到一起。

何时不使用

  • 如果有两个选项可供选择,最好不要使用下拉菜单。在这种情况下,建议使用单选框。
  • 不建议嵌套下拉列表或使用它们来显示过于复杂的信息,尽可能使选项选择直截了当。

文案指南

  • 下拉菜单内显示的操作命令应该具有相关性。
  • 下拉菜单中的文本标签建议不超过 6 个中文字符。