Dropdown

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

<code src="./demo/basic.tsx">Basic</code> <code src="./demo/extra.tsx" version="5.21.0">Extra node</code> <code src="./demo/placement.tsx">Placement</code> <code src="./demo/arrow.tsx">Arrow</code> <code src="./demo/item.tsx">Other elements</code> <code src="./demo/arrow-center.tsx">Arrow pointing at the center</code> <code src="./demo/trigger.tsx">Trigger mode</code> <code src="./demo/event.tsx">Click event</code> <code src="./demo/dropdown-button.tsx">Button with dropdown menu</code> <code src="./demo/custom-dropdown.tsx">Custom dropdown</code> <code src="./demo/sub-menu.tsx">Cascading menu</code> <code src="./demo/sub-menu-debug.tsx" debug>Cascading menu</code> <code src="./demo/overlay-open.tsx">The way of hiding menu.</code> <code src="./demo/context-menu.tsx">Context Menu</code> <code src="./demo/loading.tsx">Loading</code> <code src="./demo/selectable.tsx">Selectable Menu</code> <code src="./demo/style-class.tsx" version="6.0.0">Custom semantic dom styling</code> <code src="./demo/menu-full.tsx" debug>Menu full styles</code> <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code> <code src="./demo/icon-debug.tsx" debug>Icon debug</code>

API

Common props ref：Common props

Property	Description	Type	Default	Version
arrow	Whether the dropdown arrow should be visible	boolean \| { pointAtCenter: boolean }	false
autoAdjustOverflow	Whether to adjust dropdown placement automatically when dropdown is off screen	boolean	true	5.2.0
classNames	Customize class for each semantic structure inside the Dropdown component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props }) => Record<SemanticDOM, string>	-
disabled	Whether the dropdown menu is disabled	boolean	-
~~destroyPopupOnHide~~	Whether destroy dropdown when hidden, use `destroyOnHidden` instead	boolean	false
destroyOnHidden	Whether destroy dropdown when hidden	boolean	false	5.25.0
~~dropdownRender~~	Customize dropdown content, use `popupRender` instead	(menus: ReactNode) => ReactNode	-	4.24.0
popupRender	Customize popup content	(menus: ReactNode) => ReactNode	-	5.25.0
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
menu	The menu props	MenuProps	-
~~overlayClassName~~	The class name of the dropdown root element, please use `classNames.root` instead	string	-
~~overlayStyle~~	The style of the dropdown root element, please use `styles.root` instead	CSSProperties	-
placement	Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`	string	`bottomLeft`
styles	Customize inline style for each semantic structure inside the Dropdown component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props }) => Record<SemanticDOM, CSSProperties>	-
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	boolean	-
onOpenChange	Called when the open state is changed. Not trigger when hidden by click item	(open: boolean, info: { source: 'trigger' \| 'menu' }) => void	-	`info.source`: 5.11.0

Note

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

Semantic DOM

Design Token

FAQ

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