logoNamu Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
1.0.0
  • 组件总览
  • 通用
    • Button按钮
    • FloatButton悬浮按钮New
    • Icon图标
    • Typography排版
  • 布局
    • Divider分割线
    • Grid栅格
    • Layout布局
    • Space间距
  • 导航
    • Anchor锚点
    • Breadcrumb面包屑
    • Dropdown下拉菜单
    • Menu导航菜单
    • Pagination分页
    • Steps步骤条
  • 数据录入
    • AutoComplete自动完成
    • Cascader级联选择
    • Checkbox多选框
    • ColorPicker颜色选择器New
    • 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二维码New
    • Segmented分段控制器
    • Statistic统计数值
    • Table表格
    • Tabs标签页
    • Tag标签
    • Timeline时间轴
    • Tooltip文字提示
    • Tour漫游式引导New
    • Tree树形控件
  • 反馈
    • Alert警告提示
    • Drawer抽屉
    • Message全局提示
    • Modal对话框
    • Notification通知提醒框
    • Popconfirm气泡确认框
    • Progress进度条
    • Result结果
    • Skeleton骨架屏
    • Spin加载中
    • Watermark水印New
  • 其他
    • Affix固钉
    • App包裹组件New
    • ConfigProvider全局化配置
何时使用
代码演示
基本
弹出位置
箭头
其他元素
箭头指向
触发方式
触发事件
带下拉框的按钮
扩展菜单
多级菜单
菜单隐藏方式
右键菜单
加载中状态
菜单可选选择
API
Dropdown
Dropdown.Button
注意
Design Token
FAQ
Dropdown 在水平方向超出屏幕时会被挤压该怎么办？

Dropdown
下拉菜单

    • Breadcrumb面包屑Menu导航菜单

    相关资源

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

    社区

    Awesome Namu Design
    Medium
    Twitter
    yuqueNamu Design 语雀专栏
    Namu Design 知乎专栏
    体验科技专栏
    seeconfSEE Conf-蚂蚁体验科技大会
    加入我们

    帮助

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

    Ant XTech更多产品

    yuque语雀-构建你的数字花园
    AntVAntV-数据可视化解决方案
    EggEgg-企业级 Node.js 框架
    kitchenKitchen-Sketch 工具集
    xtech蚂蚁体验科技
    主题编辑器
    Made with ❤ by
    蚂蚁集团和 Namu Design 开源社区

    向下弹出的列表。

    何时使用

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

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

    代码演示

    Hover me
    基本

    最简单的下拉菜单。

    expand codeexpand code

    箭头

    可以展示一个箭头。

    expand codeexpand code

    箭头指向

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

    expand codeexpand code
    Hover me, Click menu item
    触发事件

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

    expand codeexpand code
    Hover me
    扩展菜单

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

    expand codeexpand code
    Hover me
    菜单隐藏方式

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

    expand codeexpand code
    加载中状态

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

    expand codeexpand code
    弹出位置

    支持 6 个弹出位置。

    expand codeexpand code
    Hover me
    其他元素

    分割线和不可用菜单项。

    expand codeexpand code
    Click me
    触发方式

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

    expand codeexpand code
    带下拉框的按钮

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

    expand codeexpand code
    Cascading menu
    多级菜单

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

    expand codeexpand code
    Right Click on here
    右键菜单

    默认是移入触发菜单，可以点击鼠标右键触发。

    expand codeexpand code
    Selectable
    菜单可选选择

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

    expand codeexpand code

    API

    通用属性参考：通用属性

    Dropdown

    参数说明类型默认值版本
    arrow下拉框箭头是否显示boolean | { pointAtCenter: boolean }false
    autoAdjustOverflow下拉框被遮挡时自动调整位置booleantrue5.2.0
    autoFocus打开后自动聚焦下拉框booleanfalse4.21.0
    disabled菜单是否禁用boolean-
    destroyPopupOnHide关闭后是否销毁 Dropdownbooleanfalse
    dropdownRender自定义下拉框内容(menus: ReactNode) => ReactNode-4.24.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) => void-4.23.0

    Dropdown.Button

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

    参数说明类型默认值版本
    buttonsRender自定义左右两个按钮(buttons: ReactNode[]) => ReactNode[]-
    loading设置按钮载入状态boolean | { delay: number }false
    danger设置危险按钮boolean-4.23.0
    icon右侧的 iconReactNode-
    size按钮大小，和 Button 一致stringdefault
    type按钮类型，和 Button 一致stringdefault
    onClick点击左侧按钮的回调，和 Button 一致(event) => void-

    注意

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

    Design Token

    组件 Token

    全局 Token

    FAQ

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

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