Dropdown

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

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
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
dropdownRender	Customize dropdown content	(menus: ReactNode) => ReactNode	-	4.24.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	-	4.24.0
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

Dropdown.Button

Same props from Dropdown. And includes additional props:

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
icon	Icon (appears on the right)	ReactNode	-
size	Size of the button, the same as Button	string	`default`
type	Type of the button, the same as Button	string	`default`
onClick	The same as Button: called when you click the button on the left	(event) => void	-

Note

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

Design Token

Component Token

Global Token

FAQ

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

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
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
dropdownRender	Customize dropdown content	(menus: ReactNode) => ReactNode	-	4.24.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	-	4.24.0
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

Dropdown.Button

Same props from Dropdown. And includes additional props:

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
icon	Icon (appears on the right)	ReactNode	-
size	Size of the button, the same as Button	string	`default`
type	Type of the button, the same as Button	string	`default`
onClick	The same as Button: called when you click the button on the left	(event) => void	-

Namu Design

Dropdown

Namu Design

Dropdown

When To Use

Examples

API

Dropdown.Button

Note

Design Token

Component Token

Global Token

FAQ

When To Use

Examples

API

Dropdown.Button

Note

Design Token

Component Token

Global Token

FAQ

DropdownChangelog

DropdownChangelog

When To Use

Examples

API

Dropdown

Dropdown.Button

Note

Design Token

Component Token

Global Token

FAQ

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

When To Use

Examples

API

Dropdown

Dropdown.Button

Note

Design Token

Component Token

Global Token

FAQ

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

Dropdown

Dropdown