Dropdown

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

Dropdown

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 | () => 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 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
disabled	Whether the dropdown menu is disabled	boolean	-
icon	Icon (appears on the right)	ReactNode	-
overlay	The dropdown menu	Menu	-
placement	Placement of popup menu: bottomLeft bottomCenter bottomRight topLeft topCenter topRight	String	bottomLeft
size	Size of the button, the same as 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	string	default
visible	Whether the dropdown menu is currently visible	boolean	-
onClick	The same as 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