Dropdown menu button

Examples

The DropdownMenuButton component renders a button. When the user clicks the button, it renders a tree of any of the following:

DropdownMenuLink
DropdownMenuSeparator
DropdownMenuHeader

Check out the Usage section for details about how to design a dropdown menu properly, and the different configuration options we provide.

Basic Example

The following example demonstrates how to create a simple DropdownMenuButton component.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  >
    <DropdownMenuLink>
      First menu item
    </DropdownMenuLink>
    <DropdownMenuLink>
      Second menu item
    </DropdownMenuLink>
    <DropdownMenuLink>
      Third menu item
    </DropdownMenuLink>
</DropdownMenuButton>

Headers and separator example

You can use headers and separators to create separation between groups of options.

<DropdownMenuButton
buttonText="Menu"
id="dropdown-menu-button"
>
  <DropdownMenuLink>
    First menu item
  </DropdownMenuLink>
  <DropdownMenuLink>
    Second menu item
  </DropdownMenuLink>
  <DropdownMenuSeparator/>
  <DropdownMenuLink>
    Separated menu item
  </DropdownMenuLink>
  <DropdownMenuSeparator/>
  <DropdownMenuHeader title="Header text">
    <DropdownMenuLink>
      First header menu item
    </DropdownMenuLink>
    <DropdownMenuLink>
      Second header menu item
    </DropdownMenuLink>
  </DropdownMenuHeader>
</DropdownMenuButton>

Drop up example

You can use the dropUp property to render the menu above the button when clicked.

<DropdownMenuButton
  buttonText="Menu"
  id="dropdown-menu-button"
  dropUp={true}
  >
    <DropdownMenuLink>
      First menu item
    </DropdownMenuLink>
    <DropdownMenuLink>
      Second menu item
    </DropdownMenuLink>
    <DropdownMenuLink>
      Third menu item
    </DropdownMenuLink>
</DropdownMenuButton>

Was this page helpful?

Examples​

Basic Example​

Headers and separator example​

Drop up example​

Usage​

Code​

Import statement​

Component contract​

Properties​

idrequired​

alignRight​

autoFocus​

buttonText​

dropUp​

fullWidth​

icon​

isOpen​

menuClassName​

toggleButtonClassName​

Dropdown menu child properties​

DropdownMenuHeader properties​

children​

id​

title​

DropdownMenuLink properties​

activeClassName​

children​

className​

disabled​

focused​

href​

icon​

iconClassName​

iconPosition​

id​

onClick​

rel​

target​

to​

visible​

DropdownMenuSeparator properties​

className​

id​

Hooks​

Translation keys​

Escape hatches​

Changelog​

Examples

Basic Example

Headers and separator example

Drop up example

Usage

Code

Import statement

Component contract

Properties

`id`required

`alignRight`

`autoFocus`

`buttonText`

`dropUp`

`fullWidth`

`icon`

`isOpen`

`menuClassName`

`toggleButtonClassName`

Dropdown menu child properties

DropdownMenuHeader properties

`children`

`id`

`title`

DropdownMenuLink properties

`activeClassName`

`children`

`className`

`disabled`

`focused`

`href`

`icon`

`iconClassName`

`iconPosition`

`id`

`onClick`

`rel`

`target`

`to`

`visible`

DropdownMenuSeparator properties

`className`

`id`

Hooks

Translation keys

Escape hatches

Changelog