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>