DropdownMenu
displays a menu to the user (such as a set of actions or functions) triggered by a button.
Use a DropdownMenu when you want users to:
- Choose an action or change a setting from a list, AND
- Only see the available choices contextually.
DropdownMenu
is a React component to render an expandable menu of buttons. It is similar in purpose to a <select>
element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.
If you need to display all the available options at all times, consider using a Toolbar instead. Use a DropdownMenu
to display a list of actions after the user interacts with a button.
Do
Use a DropdownMenu
to display a list of actions after the user interacts with an icon.
Don’t use a DropdownMenu
for important actions that should always be visible. Use a Toolbar
instead.
Don’t
Don’t use a DropdownMenu
for frequently used actions. Use a Toolbar
instead.
Generally, the parent button should indicate that interacting with it will show a DropdownMenu
.
The parent button should retain the same visual styling regardless of whether the DropdownMenu
is displayed or not.
The DropdownMenu
should typically appear directly below, or below and to the left of, the parent button. If there isn’t enough space below to display the full DropdownMenu
, it can be displayed instead above the parent button.
This component is still highly experimental, and it's not normally accessible to consumers of the @wordpress/components
package.
The component exposes a set of components that are meant to be used in combination with each other in order to implement a DropdownMenu
correctly.
The root component, used to specify the menu's trigger and its contents.
The component accepts the following props:
The trigger button
- Required: yes
The contents of the dropdown
- Required: yes
The open state of the dropdown menu when it is initially rendered. Use when not wanting to control its open state.
- Required: no
- Default:
false
The controlled open state of the dropdown menu. Must be used in conjunction with onOpenChange
.
- Required: no
Event handler called when the open state of the dropdown menu changes.
- Required: no
The modality of the dropdown menu. When set to true, interaction with outside elements will be disabled and only menu content will be visible to screen readers.
- Required: no
- Default:
true
placement
: ``'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end'`
The placement of the dropdown menu popover.
- Required: no
- Default:
'bottom-start'
for root-level menus,'right-start'
for nested menus
The distance in pixels from the trigger.
- Required: no
- Default:
8
for root-level menus,16
for nested menus
The skidding of the popover along the anchor element. Can be set to negative values to make the popover shift to the opposite side.
- Required: no
- Default:
0
for root-level menus,-8
for nested menus
Used to render a menu item.
The component accepts the following props:
The contents of the item
- Required: yes
The contents of the item's prefix.
- Required: no
The contents of the item's suffix.
- Required: no
Whether to hide the dropdown menu when the menu item is clicked.
- Required: no
- Default:
true
Determines if the element is disabled.
- Required: no
- Default:
false
Used to render a checkbox item.
The component accepts the following props:
The contents of the item
- Required: yes
The contents of the item's suffix.
- Required: no
Whether to hide the dropdown menu when the menu item is clicked.
- Required: no
- Default:
false
Determines if the element is disabled.
- Required: no
- Default:
false
The checkbox item's name.
- Required: yes
The checkbox item's value, useful when using multiple checkbox items
associated to the same name
.
- Required: no
The checkbox item's value, useful when using multiple checkbox items
associated to the same name
.
- Required: no
The checked state of the checkbox menu item when it is initially rendered. Use when not wanting to control its checked state.
- Required: no
Event handler called when the checked state of the checkbox menu item changes.
- Required: no
Used to render a radio item.
The component accepts the following props:
The contents of the item
- Required: yes
The contents of the item's suffix.
- Required: no
Whether to hide the dropdown menu when the menu item is clicked.
- Required: no
- Default:
false
Determines if the element is disabled.
- Required: no
- Default:
false
The radio item's name.
- Required: yes
The radio item's value.
- Required: yes
The checkbox item's value, useful when using multiple checkbox items
associated to the same name
.
- Required: no
The checked state of the radio menu item when it is initially rendered. Use when not wanting to control its checked state.
- Required: no
Event handler called when the checked radio menu item changes.
- Required: no
Used to group menu items.
The component accepts the following props:
The contents of the group.
- Required: yes
Used to render a group label.
The component accepts the following props:
The contents of the group.
- Required: yes
Used to render a visual separator.