Dropdown — Arco Design v2.66.18 docs

When there are too many commands, the alternative commands can be stored in the floating container that expands downward.

Install

npm install @arco-design/web-react@2.66.18

Import @arco-design/web-react/dist/css/arco.css at the entry and set the locale with ConfigProvider. React 19 projects must also import @arco-design/web-react/es/_util/react-19-adapter first, or imperative APIs such as Message and Modal cannot render.

Examples

Basic: Basic usage of Dropdown.
Position of popup: Six popup position are available: top, tl: top-left, tr: top-right, bottom, bl: bottom-left (default), br: bottom-right。
Extra node: Disable menu items and insert dividing lines.
Trigger mode: Specify the trigger mode by trigger.
Callback for MenuItem: Use Menu.onClickMenuItem to specify the callback function to be triggered when the menu item is clicked.
Dropdown with button: Use <Dropdown.Button> to use the Dropdown with button on its right side which are additional menus.
With SubMenu: Dropdown with SubMenu.
Control visibility of menu: Use popupVisible and onVisibleChange to control the visibility of the dropdown menu. Refer to Trigger for more details about trigger timing of onVisibleChange. If droplist is Menu, you can also prevent menu hiding by returning false in onClickMenuItem.
Grouped menu: Group menu items by Menu.ItemGroup.
Right click menu: Right click to trigger menu.
Menu with icons: You can add icons before menu items.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

API

Property	Description	Type	DefaultValue	Version
defaultPopupVisible	Whether the dropdown list is visible by default	boolean	`-`	-
disabled	Whether to disable popup	boolean	`-`	2.16.0
popupVisible	Whether the dropdown list is visible (Controlled)	boolean	`-`	-
unmountOnExit	Whether to umount the node on hiding	boolean	`true`	-
position	Position of dropdown list	'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'	`bl`	-
trigger	Types of events that cause the popup to show	TriggerProps['trigger']	`hover`	-
droplist	Content of dropdown list	ReactNode	`-`	-
triggerProps	Pass all `Trigger` component properties	Partial<TriggerProps>	`-`	-
getPopupContainer	To set the container of the dropdown menu	(node: HTMLElement) => Element	`-`	-
onVisibleChange	Callback when visibility changes	(visible: boolean) => void	`-`	-

Dropdown.Button

Property	Description	Type	DefaultValue	Version
defaultPopupVisible	Whether the dropdown list is visible by default	boolean	`-`	-
disabled	Whether to disable popup	boolean	`-`	2.16.0
popupVisible	Whether the dropdown list is visible (Controlled)	boolean	`-`	-
unmountOnExit	Whether to umount the node on hiding	boolean	`true`	-
position	Position of the dropdown list	'top' \| 'tl' \| 'tr' \| 'bottom' \| 'bl' \| 'br'	`br`	-
size	Same as `size` of ButtonProps	'mini' \| 'small' \| 'default' \| 'large'	`-`	-
trigger	Types of events that cause the popup to show	TriggerProps['trigger']	`hover`	-
type	Same as `type` of ButtonProps	'default' \| 'primary' \| 'secondary' \| 'dashed' \| 'outline' \| 'text'	`default`	-
droplist	Content of dropdown list	ReactNode	`-`	-
icon	Custom icon on the right	ReactNode	`<IconMore />`	-
buttonProps	Pass Button's properties to the button on the left	ButtonProps	`-`	-
className	Additional css class	string \| string[]	`-`	-
style	Additional style	CSSProperties	`-`	-
triggerProps	Pass all `Trigger` component properties	Partial<TriggerProps>	`-`	-
buttonsRender	Custom buttons inside Dropdown.Button	(buttons: ReactNode[]) => ReactNode[]	`-`	-
getPopupContainer	To set the container of the dropdown menu	(node: HTMLElement) => Element	`-`	-
onClick	Callback when button on the left is clicked	(e: Event) => void	`-`	-
onVisibleChange	Callback when visibility changes	(visible: boolean) => void	`-`	-