WUI 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.

Source@welcome-ui/dropdown-menuBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { DropdownMenu, useDropdownMenu } from '@welcome-ui/dropdown-menu'
import { Button } from '@welcome-ui/button'


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


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


  return (
    <>
      <DropdownMenu.Trigger as={Button} store={dropdownMenu}>
        Dropdown Menu
      </DropdownMenu.Trigger>
      <DropdownMenu aria-label="Example" gutter="md" store={dropdownMenu}>
        <DropdownMenu.Item disabled onClick={handleClick} store={dropdownMenu}>
          Facebook
        </DropdownMenu.Item>
        <DropdownMenu.Item onClick={handleClick} store={dropdownMenu}>
          Instagram
        </DropdownMenu.Item>
        <DropdownMenu.Separator store={dropdownMenu} />
        <DropdownMenu.Item onClick={handleClick} store={dropdownMenu}>
          Github
        </DropdownMenu.Item>
      </DropdownMenu>
    </>
  )
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/dropdown-menu
2

Import component:

import { DropdownMenu } from '@welcome-ui/dropdown-menu'

Examples

Usage

Arrow

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

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
BreadcrumbLink