编辑导语：下拉菜单，是进行界面设计的一种常用控件，虽然经常会用到，但是很多人可能并不是很了解它。本文作者为我们介绍了下拉菜单的类型、利弊，以及我们应该如何使用下拉菜单。希望通过本篇文章，可以帮助你拓展关于下拉菜单的设计知识。

一、前言

Dropdown（下拉菜单）是界面设计中的常用控件，它可以用下拉列表展示多个内容标签，用户能从预定的列表中选择一项或多项。在研究相关控件时，会发现这个控件有很多不同的名称：下拉菜单、下拉框、选择器、选择框等等。

Ant Design将下拉菜单与选择器分别放在不同的属性里，下拉菜单归属导航、选择器归属数据录入，Fiori Design 将下拉菜单与选择器定义为同一种控件。

其实，根据W3C规范规定，其应该命名为select element（选择元素）。

为方便表述，下文统一称之为下拉菜单。

二、下拉菜单是什么

最简单的下拉菜单包含四个主要部分：一个容器框，一个朝下的箭头按钮，一个项目列表和一个标签。用户可以单击向下箭头以显示项目列表，从中选择一项或多项。

下拉菜单有3种变体，可以根据选择类型进行分类：

1. 单选列表框：用户只能从互斥选项列表中选择一项
2. 多选列表框：允许用户选择多个选项
3. 搜索选择：允许用户搜索大量选项

选项过多时，下拉菜单可能会滚动，具体取决于展开时包含的项目数量。对于下拉列表，选定的选项或默认值在容器框中保持可见，而其他列表项仅在单击向下箭头后出现，完成选择或在下拉列表的外部单击可将其关闭。

三、下拉菜单的类型

下拉菜单常见用法有以下几种：