logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.25.0
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
    • Tabs
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • 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
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Dropdown

A dropdown list.
Importimport { Dropdown } from "antd";
Sourcecomponents/dropdown
Docs
Edit this pageChangelog

Resources

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

When To Use

When there are more than a few options to choose from, you can wrap them in a Dropdown. By hovering or clicking on the trigger, a dropdown menu will appear, which allows you to choose an option and execute the relevant action.

Examples

API

Common props ref:Common props

Dropdown

PropertyDescriptionTypeDefaultVersion
arrowWhether the dropdown arrow should be visibleboolean | { pointAtCenter: boolean }false
autoAdjustOverflowWhether to adjust dropdown placement automatically when dropdown is off screenbooleantrue5.2.0
autoFocusFocus element in overlay when openedbooleanfalse4.21.0
disabledWhether the dropdown menu is disabledboolean-
destroyPopupOnHideWhether destroy dropdown when hidden, use destroyOnHidden insteadbooleanfalse
destroyOnHiddenWhether destroy dropdown when hiddenbooleanfalse5.25.0
dropdownRenderCustomize dropdown content, use popupRender instead(menus: ReactNode) => ReactNode-4.24.0
popupRenderCustomize popup content(menus: ReactNode) => ReactNode-5.25.0
getPopupContainerTo set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. Example on CodePen(triggerNode: HTMLElement) => HTMLElement() => document.body
menuThe menu propsMenuProps-4.24.0
overlayClassNameThe class name of the dropdown root elementstring-
overlayStyleThe style of the dropdown root elementCSSProperties-
placementPlacement of popup menu: bottom bottomLeft bottomRight top topLeft topRightstringbottomLeft
triggerThe trigger mode which executes the dropdown action. Note that hover can't be used on touchscreensArray<click|hover|contextMenu>[hover]
openWhether the dropdown menu is currently open. Use visible under 4.23.0 (why?)boolean-4.23.0
onOpenChangeCalled when the open state is changed. Not trigger when hidden by click item. Use onVisibleChange under 4.23.0 (why?)(open: boolean, info: { source: 'trigger' | 'menu' }) => void-info.source: 5.11.0

Dropdown.Button

Same props from Dropdown. And includes additional props:

PropertyDescriptionTypeDefaultVersion
buttonsRenderCustom buttons inside Dropdown.Button(buttons: ReactNode[]) => ReactNode[]-
loadingSet the loading status of button, the same as Buttonboolean | { delay: number, icon: ReactNode }falseicon: 5.23.0
dangerSet the danger status of buttonboolean-4.23.0
iconIcon (appears on the right)ReactNode-
sizeSize of the button, the same as Buttonlarge | middle | smallmiddle
typeType of the button, the same as Buttonprimary | dashed | link | text | defaultdefault
onClickThe same as Button: called when you click the button on the left(event: React.MouseEvent<HTMLElement, MouseEvent>) => void-

Note

Please ensure that the child node of Dropdown accepts onMouseEnter, onMouseLeave, onFocus, onClick events.

Design Token

Component TokenHow to use?
Token NameDescriptionTypeDefault Value
paddingBlockVertical padding of dropdownundefined | PaddingBlock<string | number>5
zIndexPopupz-index of dropdownnumber1050
Global TokenHow to use?

FAQ

How to prevent Dropdown from being squeezed when it exceeds the screen horizontally?

You can use width: max-content style to handle this. ref #43025.

Basic

The most basic dropdown menu.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placement

Support 6 placements.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Other elements

Divider and disabled menu item.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Trigger mode

The default trigger mode is hover, you can change it to click.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Button with dropdown menu

A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Cascading menu

The menu has multiple levels.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Context Menu

The default trigger mode is hover, you can change it to contextMenu. The pop-up menu position will follow the right-click position.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Selectable Menu

Configure the selectable property in menu to enable selectable ability.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Extra node

The dropdown menu with shortcut.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
5.21.0
Arrow

You could display an arrow.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Arrow pointing at the center

By specifying arrow prop with { pointAtCenter: true }, the arrow will point to the center of the target element.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Click event

An event will be triggered when you click menu items, in which you can make different operations according to item's key.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Custom dropdown

Customize the dropdown menu via dropdownRender. If you don't need the Menu content, use the Popover component directly.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
The way of hiding menu.

The default is to close the menu when you click on menu items, this feature can be turned off.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Loading

A loading indicator can be added to a button by setting the loading property on the Dropdown.Button.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Hover me
Hover me
Click me
Cascading menu
Right Click on here
Selectable
Hover me
Hover me, Click menu item
Hover me
Hover me