WordPress.org

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 isPrimary onClick={ onToggle } aria-expanded={ isOpen }>
                Toggle Popover!
            </Button>
        ) }
        renderContent={ () => (
            <div>
                This is the content of the popover.
            </div>
        ) }
    />
);

Top ↑

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

Top ↑

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

Top ↑

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"

Top ↑

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 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

Top ↑

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

Top ↑

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

Top ↑

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

    Top ↑

    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 or Boolean

  • Required: No
  • Default: "firstElement"
Skip to toolbar