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

---
category: Components
type: Navigation
title: Dropdown
cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
demo:
  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

<code src="./demo/basic.tsx">Basic</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/sub-menu.tsx">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/menu-full.tsx">Menu full styles</code>
<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>

## 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](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |         |
| overlay            | The dropdown menu                                                                                                                                                                                                                             | [Menu](/components/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&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`]          |         |
| open               | Whether the dropdown menu is currently open. Use `visible` under 4.23.0 ([why?](/docs/react/faq#why-open))                                                                                                                                    | 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?](/docs/react/faq#why-open))                                                                                           | (open: boolean) => void                   | -                   | 4.23.0  |

You should use [Menu](/components/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](/components/menu)                  | -             |         |
| placement     | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight`     | string                                    | `bottomRight` |         |
| size          | Size of the button, the same as [Button](/components/button/#API)                           | string                                    | `default`     |         |
| trigger       | The trigger mode which executes the dropdown action                                         | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`]    |         |
| type          | Type of the button, the same as [Button](/components/button/#API)                           | string                                    | `default`     |         |
| open          | Whether the dropdown menu is currently open                                                 | boolean                                   | -             | 4.23.0  |
| onClick       | The same as [Button](/components/button/#API): 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  |
docs: Dropdown-translation (#2136) 9 years ago			`---`
			`category: Components`
chore: Update migrate script 2 years ago			`type: Navigation`
docs: update docs details 8 years ago			`title: Dropdown`
docs: Update components cover (#24744) * docs: Update components cover #24629 * docs: Update components cover 5 years ago			`cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg`
docs: migrate demo structure to dumi way 2 years ago			`demo:`
			`cols: 2`
docs: Dropdown-translation (#2136) 9 years ago			`---`

			`A dropdown list.`

			`## When To Use`

Navigation components doc tweaks (#19447) * Documentation - Affix Component * Documentation - Dropdown component * Documentation - Menu component * Documentation - Pagination component * Documentation - PageHeader component * Documentation - Steps component 5 years ago			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.
docs: Dropdown-translation (#2136) 9 years ago
docs: migrate demo structure to dumi way 2 years ago			`## Examples`

			`<code src="./demo/basic.tsx">Basic</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/sub-menu.tsx">Cascading menu</code>`
chore: merge next 2 years ago			`<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/menu-full.tsx">Menu full styles</code>`
			`<code src="./demo/render-panel.tsx">\_InternalPanelDoNotUseOrYouWillBeFired</code>`
docs: migrate demo structure to dumi way 2 years ago
docs: Dropdown-translation (#2136) 9 years ago			`## API`

			`### Dropdown`

chore: merge next 2 years ago			`\| 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](https://codepen.io/afc163/pen/zEjNOy?editors=0010) \| (triggerNode: HTMLElement) => HTMLElement \| () => document.body \| \|`
			`\| overlay \| The dropdown menu \| [Menu](/components/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?](/docs/react/faq#why-open)) \| 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?](/docs/react/faq#why-open)) \| (open: boolean) => void \| - \| 4.23.0 \|
docs: Dropdown-translation (#2136) 9 years ago
document dropdown menu 7 years ago			You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
docs: Dropdown-translation (#2136) 9 years ago
			> Warning: You must set a unique `key` for `Menu.Item`.
docs: sort api table 7 years ago			`>`
docs: update Dropdown English doc (#7442) Fixed typos 7 years ago			> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
Add instruction about dropdown menu item highlighted style 7 years ago
Merge branch "1.x-stable" 8 years ago			`### Dropdown.Button`
docs: Dropdown-translation (#2136) 9 years ago
chore: merge next 2 years ago			`\| 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](/components/menu) \| - \| \|`
			\| placement \| Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` \| string \| `bottomRight` \| \|
			\| size \| Size of the button, the same as [Button](/components/button/#API) \| 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](/components/button/#API) \| string \| `default` \| \|
			`\| open \| Whether the dropdown menu is currently open \| boolean \| - \| 4.23.0 \|`
			`\| onClick \| The same as [Button](/components/button/#API): 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 \|`