Welcome UI logo

DropdownMenu

The Dropdown Menu component is a navigational element that reveals a list of options or actions when triggered by a user interaction, such as clicking a button. It provides a compact and efficient way to present multiple choices without cluttering the interface. Dropdown menus enhance usability by organizing related items in a hierarchical structure, making it easier for users to find and select options.

SourceBuilt with Ariakit
OverviewProps
import { Button } from 'welcome-ui/Button'
import { DropdownMenu, useDropdownMenu } from 'welcome-ui/DropdownMenu'
import { Icon } from 'welcome-ui/Icon'


const Example = () => {
  const dropdownMenu = useDropdownMenu()


  const handleClick = () => {
    // your code
  }


  return (
    <>
      <DropdownMenu.Trigger as={Button} store={dropdownMenu}>
        Dropdown Menu
      </DropdownMenu.Trigger>


      <DropdownMenu aria-label="Example" store={dropdownMenu}>
        <DropdownMenu.Group>
          <DropdownMenu.GroupLabel>
            <Icon name="share" />
            Share
          </DropdownMenu.GroupLabel>
          <DropdownMenu.Item disabled onClick={handleClick}>
            Facebook
          </DropdownMenu.Item>
          <DropdownMenu.Item onClick={handleClick}>
            <Icon name="instagram" size="lg" />
            <DropdownMenu.Content>
              Instagram
              <DropdownMenu.Description>This is Instagram</DropdownMenu.Description>
            </DropdownMenu.Content>
            <Icon className="ml-auto" name="angle-right" size="lg" />
          </DropdownMenu.Item>
          <DropdownMenu.Item onClick={handleClick}>Github</DropdownMenu.Item>
        </DropdownMenu.Group>
        <DropdownMenu.Separator />
        <DropdownMenu.Action onClick={handleClick}>
          <Icon name="plus" />
          More
        </DropdownMenu.Action>
      </DropdownMenu>
    </>
  )
}


export default Example

Examples

Usage

Size

Use the size prop to change the size of the dropdown menu. Available sizes are md and lg (default).

Arrow

Use DropdownMenu.Arrow to add an arrow to the dropdown menu

Action

Use DropdownMenu.Action to add an action to the dropdown menu

Description

Groups

Search

Check marks

Different variants are available to show check marks in the menu items: checkbox, checkbox-mark, radio, radio-mark and toggle.

radio and radio-mark variants are used when only one item can be selected at a time, therefore the menu will close on selection, while checkbox, checkbox-mark and toggle variants are used when multiple items can be selected at a time, so the menu will stay open on selection.

Submenu

Stay open

Use hideOnClick={false} on DropdownMenu.Item to not closing menu on item click.

useDropdownMenu

We use useMenuStore from Ariakit Menu for the state of the dropdown menu with the animated flag set to true by default.

Pass options to useDropdownMenu:

  • defaultOpen: e.g. const dropdownMenu = useDropdownMenu({ defaultOpen: true })

And the hook returns (among other things):

  • useState('open'): whether the dropdown menu is currently open
  • hide: a function to hide the dropdown menu
BreadcrumbPagination