下拉菜单

向下弹出的列表。

何时使用

当页面上的操作命令过多时，用此组件可以收纳操作元素。点击或移入触点，会出现一个下拉菜单。可在列表中进行选择，并执行相应的命令。

用于收罗一组命令操作。
Select 用于选择，而 Dropdown 是命令集合。

代码演示

API

通用属性参考：通用属性

参数	说明	类型	默认值	版本	全局配置
arrow	下拉框箭头是否显示	boolean \| { pointAtCenter: boolean }	false		×
autoAdjustOverflow	下拉框被遮挡时自动调整位置	boolean	true	5.2.0	×
classNames	用于自定义 Dropdown 组件内部各语义化结构的 class，支持对象或函数	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-		6.0.0
disabled	菜单是否禁用	boolean	-		×
~~destroyPopupOnHide~~	关闭后是否销毁 Dropdown，使用 `destroyOnHidden` 替换	boolean	false		×
destroyOnHidden	关闭后是否销毁 Dropdown	boolean	false	5.25.0	×
~~dropdownRender~~	自定义下拉框内容，使用 `popupRender` 替换	(menus: ReactNode) => ReactNode	-	4.24.0	×
popupRender	自定义弹出框内容	(menus: ReactNode) => ReactNode	-	5.25.0	×
getPopupContainer	菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。示例	(triggerNode: HTMLElement) => HTMLElement	() => document.body		×
menu	菜单配置项	MenuProps	-		×
~~overlayClassName~~	下拉根元素的类名称, 请使用 `classNames.root` 替换	string	-		×
~~overlayStyle~~	下拉根元素的样式，请使用 `styles.root`	CSSProperties	-		×
placement	菜单弹出位置：`top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom`	string	`bottomLeft`	`left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom`：6.5.0	×
styles	用于自定义 Dropdown 组件内部各语义化结构的行内 style，支持对象或函数	Record<SemanticDOM , CSSProperties> \| (info: { props }) => Record<SemanticDOM , CSSProperties>	-		6.0.0
trigger	触发下拉的行为，移动端不支持 hover	Array<`click`\|`hover`\|`contextMenu`>	[`hover`]		×
open	菜单是否显示	boolean	-		×
onOpenChange	菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发	(open: boolean, info: { source: 'trigger' \| 'menu' }) => void	-	`info.source`: 5.11.0	×

注意

请确保 Dropdown 的子元素能接受 onMouseEnter、onMouseLeave、onFocus、onClick 事件。

Semantic DOM

语义节点	原生说明	版本
`root`	dropdown 的根元素，设置定位、层级和容器样式	—
`itemTitle`	dropdown 选项的标题内容区域，设置布局和文字样式	—
`item`	dropdown 的单个选项元素，设置选项的交互状态和背景样式	—
`itemContent`	dropdown 选项的主要内容区域，设置内容布局和链接样式	—
`itemIcon`	dropdown 选项的图标区域，设置图标的尺寸和间距样式	—

语义说明来源: vendor/components/dropdown/demo/_semantic.tsx

主题变量（Design Token）

类型、继承关系和原生令牌声明保持固定源码原文；默认值由原生主题计算，并可能受 ConfigProvider 覆盖。本表不伪造静态默认值。

令牌	类型	原生说明
`zIndexPopup`	`number`	下拉菜单 z-index
`paddingBlock`	`CSSProperties['paddingBlock']`	下拉菜单纵向内边距

声明来源: vendor/components/dropdown/style/index.ts

import type { CSSProperties } from 'react';

import { unit } from '@ant-design/cssinjs';

import { genFocusStyle, resetComponent } from '../../style';

import {
  initMoveMotion,
  initSlideMotion,
  initZoomMotion,
  slideDownIn,
  slideDownOut,
  slideLeftIn,
  slideLeftOut,
  slideRightIn,
  slideRightOut,
  slideUpIn,
  slideUpOut,
} from '../../style/motion';

import type { ArrowOffsetToken } from '../../style/placementArrow';

import getArrowStyle, { getArrowOffsetToken } from '../../style/placementArrow';

import type { ArrowToken } from '../../style/roundedArrow';

import { getArrowToken } from '../../style/roundedArrow';

import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';

import { genStyleHooks, mergeToken } from '../../theme/internal';

import genStatusStyle from './status';

export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
  /**
   * @desc 下拉菜单 z-index
   * @descEN z-index of dropdown
   */
  zIndexPopup: number;
  /**
   * @desc 下拉菜单纵向内边距
   * @descEN Vertical padding of dropdown
   */
  paddingBlock: CSSProperties['paddingBlock'];
}

/**
 * @desc Dropdown 组件的 Token
 * @descEN Token for Dropdown component
 */
export interface DropdownToken extends FullToken<'Dropdown'> {
  /**
   * @desc 下拉箭头距离
   * @descEN Distance of dropdown arrow
   */
  dropdownArrowDistance: number | string;
  /**
   * @desc 下拉菜单边缘子项内边距
   * @descEN Padding of edge child in dropdown menu
   */
  dropdownEdgeChildPadding: number;
  /**
   * @desc 菜单类名
   * @descEN Menu class name
   */
  menuCls: string;
}

FAQ

你可以通过 width: max-content 来解决这个问题，参考 #43025。

原生通用属性

Tips: 以下通用属性适用于 antd 大部分组件，不支持的组件会单独说明。

参数	说明	类型	默认值
style	自定义样式	CSSProperties	-
className	自定义类名	string	-
rootClassName	添加在组件最外层的 className	string	-
autoFocus	自动获取焦点，仅对表单类、链接、交互容器等可聚焦元素生效	boolean	false

安装并复现示例

npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23

使用 ConfigProvider 和原生 App，并单独配置 dayjs 语言。每个示例在查看代码中列出完整源码文件和额外固定依赖。示例名称用于选择演示，不是组件通用属性。主题、语言与 SSR 初始化见资源安装指南。

原生类型参考

源码查看器包含未修改的原生实现和以下声明文件，继承类型仍位于原生包中。代码中的英文注释保留为源码参考。

vendor/components/dropdown/dropdown-button.tsx
vendor/components/dropdown/dropdown.tsx
vendor/components/dropdown/style/index.ts

来源与许可

https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd

保留原生中英文正文与可执行示例；官网专用的嵌入章节和令牌表格在本地展开。Ant Design 使用 MIT 许可，另列依赖的许可证也需保留。上传预览禁止向外发起请求，不提供后端服务。

下拉菜单

下拉菜单

何时使用

代码演示

API

Dropdown

注意

Semantic DOM

主题变量（Design Token）

FAQ

Dropdown 在水平方向超出屏幕时会被挤压该怎么办？

原生通用属性

安装并复现示例

原生类型参考

来源与许可