Dropdown
Edit
Dropdown is a React component to render a button that opens a floating content modal when clicked.
This component 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
import { Button, Dropdown } from '@wordpress/components';
const MyDropdown = () => (
<Dropdown
className="my-container-class-name"
contentClassName="my-popover-content-classname"
popoverProps={ { placement: 'bottom-start' } }
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
The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.
className
: string
className of the global container
- Required: No
contentClassName
: string
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 child of the container node.
- Required: No
expandOnMobile
: boolean
Opt-in prop to show popovers fullscreen on mobile.
- Required: No
- Default:
false
focusOnMount
: 'firstElement' | boolean
By default, the first tabbable element in the popover will receive focus when it mounts. This is the same as setting this prop to "firstElement"
.
Specifying a true
value will focus the container instead.
Specifying a false
value disables the focus handling entirely (this should only be done when an appropriately accessible substitute behavior exists).
- Required: No
- Default:
"firstElement"
headerTitle
: string
Set this to customize the text that is shown in the dropdown’s header when it is fullscreen on mobile.
- Required: No
onClose
: () => void
A callback invoked when the popover should be closed.
- Required: No
onToggle
: ( willOpen: boolean ) => void
A callback invoked when the state of the popover changes from open to closed and vice versa.
The callback receives a boolean as a parameter. If true
, the popover will open. If false
, the popover will close.
- Required: No
popoverProps
: WordPressComponentProps< Omit< PopoverProps, 'children' > 'div', false >
Properties of popoverProps object will be passed as props to the Popover
component.
Use this object to access properties/features of the Popover
component that are not already exposed in the Dropdown
component, e.g.: the ability to have the popover without an arrow.
- Required: No
renderContent
: ( props: CallbackProps ) => ReactNode
A callback invoked to render the content of the dropdown menu.
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-
Required: Yes
renderToggle
: ( props: CallbackProps ) => ReactNode
A callback invoked to render the Dropdown Toggle Button.
Its props are the same as the renderContent
props.
- Required: Yes
style
: React.CSSProperties
The style of the global container
- Required: No