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

Top ↑

Props

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

Top ↑

className: string

className of the global container

  • Required: No

Top ↑

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

Top ↑

expandOnMobile: boolean

Opt-in prop to show popovers fullscreen on mobile.

  • Required: No
  • Default: false

Top ↑

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"

Top ↑

headerTitle: string

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

  • Required: No

Top ↑

onClose: () => void

A callback invoked when the popover should be closed.

  • Required: No

Top ↑

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

Top ↑

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

Top ↑

renderContent: ( props: CallbackProps ) => ReactNode

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

Top ↑

renderToggle: ( props: CallbackProps ) => ReactNode

A callback invoked to render the Dropdown Toggle Button.

Its props are the same as the renderContent props.

  • Required: Yes

Top ↑

style: React.CSSProperties

The style of the global container

  • Required: No