Welcome UI - DropdownMenu

import { Button } from 'welcome-ui/Button'
import { DropdownMenu, useDropdownMenu } from 'welcome-ui/DropdownMenu'

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

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.

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