# Dropdown

```jsx
import { Menu, Dropdown, Button } from 'antd';

const menu = (
  <Menu>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
        1st menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">
        2nd menu item
      </a>
    </Menu.Item>
    <Menu.Item>
      <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">
        3rd menu item
      </a>
    </Menu.Item>
  </Menu>
);

ReactDOM.render(
  <div>
    <Dropdown overlay={menu} placement="bottomLeft">
      <Button>bottomLeft</Button>
    </Dropdown>
    <Dropdown overlay={menu} placement="bottomCenter">
      <Button>bottomCenter</Button>
    </Dropdown>
    <Dropdown overlay={menu} placement="bottomRight">
      <Button>bottomRight</Button>
    </Dropdown>
    <br />
    <Dropdown overlay={menu} placement="topLeft">
      <Button>topLeft</Button>
    </Dropdown>
    <Dropdown overlay={menu} placement="topCenter">
      <Button>topCenter</Button>
    </Dropdown>
    <Dropdown overlay={menu} placement="topRight">
      <Button>topRight</Button>
    </Dropdown>
  </div>,
  mountNode,
);
```

### API <a href="#api" id="api"></a>

#### Dropdown <a href="#dropdown" id="dropdown"></a>

| Property          | Description                                                                                                                                                               | Type                                                      | Default               | Version |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------- | --------------------- | ------- |
| disabled          | Whether the dropdown menu is disabled                                                                                                                                     | boolean                                                   | -                     |         |
| 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. | Function(triggerNode)                                     | `() => document.body` |         |
| overlay           | The dropdown menu                                                                                                                                                         | [Menu](https://ant.design/components/menu/) \| () => Menu | -                     |         |
| overlayClassName  | Class name of the dropdown root element                                                                                                                                   | string                                                    | -                     |         |
| overlayStyle      | Style of the dropdown root element                                                                                                                                        | object                                                    | -                     |         |
| placement         | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `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']`           |         |
| visible           | Whether the dropdown menu is currently visible                                                                                                                            | boolean                                                   | -                     |         |
| onVisibleChange   | Called when the visible state is changed.                                                                                                                                 | Function(visible)                                         | -                     |         |

You should use [Menu](https://ant.design/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 <a href="#dropdown.button" id="dropdown.button"></a>

| Property        | Description                                                                                               | Type                                        | Default      | Version |
| --------------- | --------------------------------------------------------------------------------------------------------- | ------------------------------------------- | ------------ | ------- |
| disabled        | Whether the dropdown menu is disabled                                                                     | boolean                                     | -            |         |
| icon            | Icon (appears on the right)                                                                               | ReactNode                                   | -            |         |
| overlay         | The dropdown menu                                                                                         | [Menu](https://ant.design/components/menu/) | -            |         |
| placement       | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight`       | String                                      | `bottomLeft` |         |
| size            | Size of the button, the same as [Button](https://ant.design/components/button/)                           | 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](https://ant.design/components/button/)                           | string                                      | `default`    |         |
| visible         | Whether the dropdown menu is currently visible                                                            | boolean                                     | -            |         |
| onClick         | The same as [Button](https://ant.design/components/button/): called when you click the button on the left | Function                                    | -            |         |
| onVisibleChange | Called when the visible state is changed                                                                  | Function                                    | -            |         |
| buttonsRender   | custom buttons inside Dropdown.Button                                                                     | `([buttons: ReactNode[]]) => ReactNode`     |              |         |