Search
Dropdown
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.
Primary dropdown
Use primary for the default dropdown menu appearance. The primary menu will scroll after its height exceeds the pre-defined amount.
Toggle disabled
Secondary dropdown
Use a secondary dropdown with a primary dropdown for secondary actions. The secondary menu will scroll after its height exceeds the pre-defined amount.
Toggle disabled
Link dropdown
Use a secondary link dropdown to avoid overwhelming the page with red buttons.
Toggle disabled
API
Checkbox
| Property | Description | Type | Default |
|---|---|---|---|
disabled | Whether the dropdown menu is disabled | 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. | 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) | - |
Dropdown.Button
| Property | Description | Type | Default |
|---|---|---|---|
disabled | Whether the dropdown menu is disabled | boolean | - |
icon | Icon (appears on the right) | ReactNode | - |
overlay | The dropdown 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 | - |