Dropdown
Edit
Dropdown is a React component to render a button that opens a floating content modal when clicked.
This components takes care of updating the state of the dropdown menu (opened/closed), handles closing the menu when clicking outside
and uses render props to render the button and the content.
Usage Usage
import { Button, Dropdown } from '@wordpress/components'; const MyDropdown = () => ( <Dropdown className="my-container-class-name" contentClassName="my-popover-content-classname" position="bottom right" renderToggle={ ( { isOpen, onToggle } ) => ( <Button variant="primary" onClick={ onToggle } aria-expanded={ isOpen } > Toggle Popover! </Button> ) } renderContent={ () => <div>This is the content of the popover.</div> } /> );
Props Props
The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
className className
className of the global container
- Type:
String
- Required: No
contentClassName contentClassName
If you want to target the dropdown menu for styling purposes, you need to provide a contentClassName because it’s not being rendered as a children of the container node.
- Type:
String
- Required: No
position position
The direction in which the popover should open relative to its parent node. Specify y- and x-axis as a space-separated string. Supports "top"
, "bottom"
y axis, and "left"
, "center"
, "right"
x axis.
- Type:
String
- Required: No
- Default:
"top center"
renderToggle renderToggle
A callback invoked to render the Dropdown Toggle Button.
- Type:
Function
- Required: Yes
The first argument of the callback is an object containing the following properties:
isOpen
: whether the dropdown menu is opened or notonToggle
: A function switching the dropdown menu’s state from open to closed and vice versaonClose
: A function that closes the menu if invoked
renderContent renderContent
A callback invoked to render the content of the dropdown menu. Its first argument is the same as the renderToggle
prop.
- Type:
Function
- Required: Yes
expandOnMobile expandOnMobile
Opt-in prop to show popovers fullscreen on mobile, pass false
in this prop to avoid this behavior.
- Type:
Boolean
- Required: No
- Default:
false
headerTitle headerTitle
Set this to customize the text that is shown in the dropdown’s header when
it is fullscreen on mobile.
- Type:
String
- Required: No
focusOnMount focusOnMount
By default, the first tabblable element in the popover will receive focus when it mounts. This is the same as setting focusOnMount
to "firstElement"
. If you want to focus the container instead, you can set focusOnMount
to "container"
.
Set this prop to false
to disable focus changing entirely. This should only be set when an appropriately accessible substitute behavior exists.
- Type:
String
orBoolean
- Required: No
- Default:
"firstElement"
popoverProps popoverProps
Properties of popoverProps object will be passed as props to the Popover
component.
Use this o object to access properties/feature if the Popover
component that are not already exposed in the Dropdown
component, e.g.: the hability to have the popover without an arrow.
- Type:
Object
- Required: No
onClose onClose
A callback invoked when the popover should be closed.
- Type:
Function
- Required: No
onToggle onToggle
A callback invoked when the state of the popover changes from open to closed and vice versa.
Function receives a boolean as a parameter. If true
, the popover will open. If false
, the popover will close.
- Type:
Function
- Required: No