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.

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> }
    />
);

The component accepts the following props. Props not included in this set will be applied to the element wrapping Popover content.

className of the global container

• Required: No

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

Opt-in prop to show popovers fullscreen on mobile.

• Required: No
• Default: false

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"

Set this to customize the text that is shown in the dropdown’s header when it is fullscreen on mobile.

• Required: No

A callback invoked when the popover should be closed.

• Required: No

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

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

A callback invoked to render the content of the dropdown menu.

• isOpen: whether the dropdown menu is opened or not
• onToggle: A function switching the dropdown menu’s state from open to closed and vice versa
• onClose: A function that closes the menu if invoked

• Required: Yes

A callback invoked to render the Dropdown Toggle Button.

Its props are the same as the renderContent props.

• Required: Yes

The style of the global container

• Required: No