WordPress.org

DropdownMenu Edit

Dropdown Menu is a React component to render an expandable menu of buttons. It is similar in purpose to a <select> element, with the distinction that it does not maintain a value. Instead, each option behaves as an action button.

Usage Usage

Render a Dropdown Menu with a set of controls:

import { DropdownMenu } from '@wordpress/components';

const MyDropdownMenu = () => (
    <DropdownMenu
        icon="move"
        label="Select a direction"
        controls={ [
            {
                title: 'Up',
                icon: 'arrow-up-alt',
                onClick: () => console.log( 'up' )
            },
            {
                title: 'Right',
                icon: 'arrow-right-alt',
                onClick: () => console.log( 'right' )
            },
            {
                title: 'Down',
                icon: 'arrow-down-alt',
                onClick: () => console.log( 'down' )
            },
            {
                title: 'Left',
                icon: 'arrow-left-alt',
                onClick: () => console.log( 'left' )
            },
        ] }
    />
);

Top ↑

Props Props

The component accepts the following props:

icon icon

The Dashicon icon slug to be shown in the collapsed menu button.

  • Type: String
  • Required: No
  • Default: "menu"

See also: https://developer.wordpress.org/resource/dashicons/

Top ↑

label label

A human-readable label to present as accessibility text on the focused collapsed menu button.

  • Type: String
  • Required: Yes

Top ↑

controls controls

An array of objects describing the options to be shown in the expanded menu.

Each object should include an icon Dashicon slug string, a human-readable title string, isDisabled boolean flag and an onClick function callback to invoke when the option is selected.

  • Type: Array
  • Required: Yes

See also: https://developer.wordpress.org/resource/dashicons/

Skip to toolbar