# Dropdown

- Page: https://jiguang132.com/resources/arco-design/docs/dropdown
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

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

## Install

```bash
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](/react/components/trigger#Controlled) 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

### Dropdown

|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#trigger)['trigger'] |`hover`|-|
|droplist|Content of dropdown list|ReactNode |`-`|-|
|triggerProps|Pass all `Trigger` component properties|Partial&lt;[TriggerProps](trigger#trigger)&gt; |`-`|-|
|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#trigger)['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&lt;[TriggerProps](trigger#trigger)&gt; |`-`|-|
|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 |`-`|-|

---

Index of all JGuang resources: https://jiguang132.com/llms.txt