Skip to main content

Dropdown menu button

Dropdown menu button in Storybook

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>