Props

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 Built with Ariakit

Github

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

Github

Size

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

Github

Arrow

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

Github

Action

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

Github

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.

Github

Submenu

Github

Stay open

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

Github

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

Breadcrumb Pagination