logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.2
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮
      5.0.0
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Flex弹性布局
      5.10.0
    • Grid栅格
    • Layout布局
    • Space间距
    • Splitter分隔面板
      5.21.0
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
    • Tabs标签页
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器
      5.5.0
    • DatePicker日期选择框
    • Form表单
    • Input输入框
    • InputNumber数字输入框
    • Mentions提及
    • Radio单选框
    • Rate评分
    • Select选择器
    • Slider滑动输入条
    • Switch开关
    • TimePicker时间选择框
    • Transfer穿梭框
    • TreeSelect树选择
    • Upload上传
  • 数据展示
    • Avatar头像
    • Badge徽标数
    • Calendar日历
    • Card卡片
    • Carousel走马灯
    • Collapse折叠面板
    • Descriptions描述列表
    • Empty空状态
    • Image图片
    • List列表
    • Popover气泡卡片
    • QRCode二维码
      5.1.0
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导
      5.0.0
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印
      5.1.0
  • 其他
    • Affix固钉
    • App包裹组件
      5.1.0
    • ConfigProvider全局化配置
    • Util工具类
      5.13.0

Dropdown
下拉菜单

向下弹出的列表。
使用import { Dropdown } from "antd";
源码components/dropdown
文档
编辑此页更新日志

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区

何时使用

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

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

代码演示

Hover me
基本

最简单的下拉菜单。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
弹出位置

支持 6 个弹出位置。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me
其他元素

分割线和不可用菜单项。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Click me
触发方式

默认是移入触发菜单,可以点击触发。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
带下拉框的按钮

左边是按钮,右边是额外的相关功能菜单。可设置 icon 属性来修改右边的图标。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Cascading menu
多级菜单

传入的菜单里有多个层级。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Right Click on here
右键菜单

默认是移入触发菜单,可以点击鼠标右键触发。弹出菜单位置会跟随右键点击位置变动。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Selectable
菜单可选选择

添加 menu 中的 selectable 属性可以开启选择能力。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me
额外节点

带有快捷方式的下拉菜单。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0
箭头

可以展示一个箭头。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
箭头指向

设置 arrow 为 { pointAtCenter: true } 后,箭头将指向目标元素的中心。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me, Click menu item
触发事件

点击菜单项后会触发事件,用户可以通过相应的菜单项 key 进行不同的操作。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me
扩展菜单

使用 dropdownRender 对下拉菜单进行自由扩展。如果你并不需要 Menu 内容,请直接使用 Popover 组件。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me
菜单隐藏方式

默认是点击关闭菜单,可以关闭此功能。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
加载中状态

添加 loading 属性即可让按钮处于加载状态,最后两个按钮演示点击后进入加载状态。

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code

API

通用属性参考:通用属性

Dropdown

参数说明类型默认值版本
arrow下拉框箭头是否显示boolean | { pointAtCenter: boolean }false
autoAdjustOverflow下拉框被遮挡时自动调整位置booleantrue5.2.0
autoFocus打开后自动聚焦下拉框booleanfalse4.21.0
disabled菜单是否禁用boolean-
destroyPopupOnHide关闭后是否销毁 Dropdown,使用 destroyOnHidden 替换booleanfalse
destroyOnHidden关闭后是否销毁 Dropdownbooleanfalse5.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-4.24.0
overlayClassName下拉根元素的类名称string-
overlayStyle下拉根元素的样式CSSProperties-
placement菜单弹出位置:bottom bottomLeft bottomRight top topLeft topRightstringbottomLeft
trigger触发下拉的行为,移动端不支持 hoverArray<click|hover|contextMenu>[hover]
open菜单是否显示,小于 4.23.0 使用 visible(为什么?)boolean-4.23.0
onOpenChange菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 onVisibleChange(为什么?)(open: boolean, info: { source: 'trigger' | 'menu' }) => void-info.source: 5.11.0

Dropdown.Button

属性与 Dropdown 的相同。还包含以下属性:

参数说明类型默认值版本
buttonsRender自定义左右两个按钮(buttons: ReactNode[]) => ReactNode[]-
loading设置按钮载入状态,和 Button 一致boolean | { delay: number, icon: ReactNode }falseicon: 5.23.0
danger设置危险按钮boolean-4.23.0
icon右侧的 iconReactNode-
size按钮大小,和 Button 一致large | middle | smallmiddle
type按钮类型,和 Button 一致primary | dashed | link | text | defaultdefault
onClick点击左侧按钮的回调,和 Button 一致(event: React.MouseEvent<HTMLElement, MouseEvent>) => void-

注意

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

主题变量(Design Token)

组件 Token如何定制?
Token 名称描述类型默认值
paddingBlock下拉菜单纵向内边距undefined | PaddingBlock<string | number>5
zIndexPopup下拉菜单 z-indexnumber1050
全局 Token如何定制?

FAQ

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

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