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.
ReactDOM.render(<Alertmessage="After version 4.24.0, we provide a simpler usage <Dropdown menu={{ items: [...] }} /> with better perfermance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0."/>, mountNode);
```
```jsx
// works when >=4.24.0, recommended ✅
const items = [
{ label: 'item 1', key: 'item-1' }, // remember to pass the key prop
{ label: 'item 2', key: 'item-2' },
];
return (
<Dropdownmenu={{items}}>
<a>Hover me</a>
</Dropdown>
);
// works when <4.24.0,deprecatedwhen>=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](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| 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 |
