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

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>.

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