Dropdown
Dropdown
A dropdown list.
Importimport { Dropdown } from "antd"; |
Sourcecomponents/dropdown |
- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
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.
Common props ref：Common props
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| arrow | Whether the dropdown arrow should be visible | boolean | { pointAtCenter: boolean } | false | |
| autoAdjustOverflow | Whether to adjust dropdown placement automatically when dropdown is off screen | boolean | true | 5.2.0 |
| autoFocus | Focus element in overlay when opened | boolean | false | 4.21.0 |
| disabled | Whether the dropdown menu is disabled | boolean | - | |
| destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 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 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| menu | The menu props | MenuProps | - | 4.24.0 |
| overlayClassName | The class name of the dropdown root element | string | - | |
| overlayStyle | The style of the dropdown root element | CSSProperties | - | |
| placement | Placement of popup menu: bottom bottomLeft bottomRight top topLeft 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] | |
| open | Whether the dropdown menu is currently open. Use visible under 4.23.0 (why?) | 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?) | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | info.source: 5.11.0 |
Same props from Dropdown. And includes additional props:
| Property | Description | Type | Default | Version |
|---|---|---|---|---|
| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode[]) => ReactNode[] | - | |
| loading | Set the loading status of button, the same as Button | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
| danger | Set the danger status of button | boolean | - | 4.23.0 |
| icon | Icon (appears on the right) | ReactNode | - | |
| size | Size of the button, the same as Button | large | middle | small | middle | |
| type | Type of the button, the same as Button | primary | dashed | link | text | default | default | |
| onClick | The same as Button: called when you click the button on the left | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - |
Please ensure that the child node of Dropdown accepts onMouseEnter, onMouseLeave, onFocus, onClick events.
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| paddingBlock | Vertical padding of dropdown | undefined | PaddingBlock<string | number> | 5 |
| zIndexPopup | z-index of dropdown | number | 1050 |
You can use width: max-content style to handle this. ref #43025.
The most basic dropdown menu.
Support 6 placements.
Divider and disabled menu item.
The default trigger mode is hover, you can change it to click.
A button is on the left, and a related functional menu is on the right. You can set the icon property to modify the icon of right.
The menu has multiple levels.
The default trigger mode is hover, you can change it to contextMenu. The pop-up menu position will follow the right-click position.
Configure the selectable property in menu to enable selectable ability.
The dropdown menu with shortcut.
You could display an arrow.
By specifying arrow prop with { pointAtCenter: true }, the arrow will point to the center of the target element.
An event will be triggered when you click menu items, in which you can make different operations according to item's key.
Customize the dropdown menu via dropdownRender. If you don't need the Menu content, use the Popover component directly.
The default is to close the menu when you click on menu items, this feature can be turned off.
A loading indicator can be added to a button by setting the loading property on the Dropdown.Button.
