logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.26.1
  • 组件总览
  • 通用
    • 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
何时使用
代码演示
基本
额外节点
弹出位置
箭头
其他元素
箭头指向
触发方式
触发事件
带下拉框的按钮
扩展菜单
多级菜单
菜单隐藏方式
右键菜单
加载中状态
菜单可选选择
API
Dropdown
Dropdown.Button
注意
主题变量(Design Token)
FAQ
Dropdown 在水平方向超出屏幕时会被挤压该怎么办?

Dropdown
下拉菜单

向下弹出的列表。
使用import { Dropdown } from "antd";
源码components/dropdown
文档
编辑此页更新日志
文档贡献者
  • Breadcrumb面包屑Menu导航菜单

    相关资源

    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
    X
    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
    codeblock
    codepen icon
    External Link Icon
    expand codeexpand code
    弹出位置

    支持 6 个弹出位置。

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

    分割线和不可用菜单项。

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

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

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

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

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

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

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

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

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

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

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

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

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

    可以展示一个箭头。

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

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

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

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

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

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

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

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

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

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

    CodeSandbox Icon
    codeblock
    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。