ant-design/components/dropdown/index.en-US.md

category	type	title	cover	demo
Components	Navigation	Dropdown	https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg	[{cols 2}]

A dropdown list.

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

Basic Placement Arrow Other elements Arrow pointing at the center Trigger mode Click event Button with dropdown menu Cascading menu The way of hiding menu. Context Menu Loading Selectable Menu Menu full styles _InternalPanelDoNotUseOrYouWillBeFired

API

Dropdown

Property	Description	Type	Default	Version
arrow	Whether the dropdown arrow should be visible	boolean | { pointAtCenter: boolean }	false
autoFocus	Focus element in overlay when opened	boolean	false	4.21.0
disabled	Whether the dropdown menu is disabled	boolean	-
destroyPopupOnHide	Whether destroy dropdown when hidden	boolean	false
getPopupContainer	To 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
overlay	The dropdown menu	Menu | () => Menu	-
overlayClassName	The class name of the dropdown root element	string	-
overlayStyle	The style of the dropdown root element	CSSProperties	-
placement	Placement of popup menu: bottom bottomLeft bottomRight top topLeft topRight	string	bottomLeft
trigger	The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens	Array<click|hover|contextMenu>	[hover]
open	Whether the dropdown menu is currently open. Use visible under 4.23.0 (why?)	boolean	-	4.23.0
onOpenChange	Called when the open state is changed. Not trigger when hidden by click item. Use onVisibleChange under 4.23.0 (why?)	(open: boolean) => void	-	4.23.0

You should use Menu as overlay. The menu items and dividers are also available by using Menu.Item and Menu.Divider.

Warning: You must set a unique key for Menu.Item.

Menu of Dropdown is unselectable by default, you can make it selectable via <Menu selectable>.

Dropdown.Button

Property	Description	Type	Default	Version
buttonsRender	Custom buttons inside Dropdown.Button	(buttons: ReactNode[]) => ReactNode[]	-
loading	Set the loading status of button	boolean | { delay: number }	false
danger	Set the danger status of button	boolean	-	4.23.0
disabled	Whether the dropdown menu is disabled	boolean	-
icon	Icon (appears on the right)	ReactNode	-
overlay	The dropdown menu	Menu	-
placement	Placement of popup menu: bottom bottomLeft bottomRight top topLeft topRight	string	bottomRight
size	Size of the button, the same as Button	string	default
trigger	The trigger mode which executes the dropdown action	Array<click|hover|contextMenu>	[hover]
type	Type of the button, the same as Button	string	default
open	Whether the dropdown menu is currently open	boolean	-	4.23.0
onClick	The same as Button: called when you click the button on the left	(event) => void	-
onOpenChange	Called when the open state is changed	(open: boolean) => void	-	4.23.0