<MenuContainer>
{({ open, toggleMenu, closeMenu }) => (
  <>
    <MenuButton onClick={toggleMenu} showChevron>Actions</MenuButton>
    {open && (
      <Menu width={200} closeMenu={closeMenu}>
        <MenuItem onClick={() => { console.log('One clicked'); closeMenu(); }}>One</MenuItem>
        <MenuItem onClick={() => { console.log('Two clicked'); closeMenu(); }}>Two</MenuItem>
        <MenuItem onClick={() => { console.log('Three clicked'); closeMenu(); }}>Three</MenuItem>
        <MenuItem type="error" onClick={() => { console.log('Delete clicked'); closeMenu(); }}>Delete</MenuItem>
      </Menu>
    )}
  </>
)}
</MenuContainer>

Disabled state

<MenuContainer>
{({ open, toggleMenu, closeMenu }) => (
  <>
    <MenuButton onClick={toggleMenu}>Options</MenuButton>
    {open && (
      <Menu width={200} closeMenu={closeMenu}>
        <MenuItem onClick={() => { console.log('First clicked'); closeMenu(); }}>First</MenuItem>
        <MenuItem disabled>Disabled option</MenuItem>
        <MenuItem onClick={() => { console.log('Second clicked'); closeMenu(); }}>Second</MenuItem>
      </Menu>
    )}
  </>
)}
</MenuContainer>

Icon buttons

<MenuContainer>
{({ open, toggleMenu, closeMenu }) => (
  <>
    <MenuButton onClick={toggleMenu}>
      <OverflowMenuHorizontal size={20} />
    </MenuButton>
    {open && (
      <Menu width={180} closeMenu={closeMenu}>
        <MenuItem onClick={() => { console.log('Edit clicked'); closeMenu(); }}>Edit</MenuItem>
        <MenuItem onClick={() => { console.log('Delete clicked'); closeMenu(); }} type="error">Delete</MenuItem>
      </Menu>
    )}
  </>
)}
</MenuContainer>

With icons

<MenuContainer>
{({ open, toggleMenu, closeMenu }) => (
  <>
    <MenuButton onClick={toggleMenu} showChevron>
      Account
    </MenuButton>
    {open && (
      <Menu width={220} closeMenu={closeMenu}>
        <MenuItem icon={<User size={16} />} onClick={() => { console.log('Profile clicked'); closeMenu(); }}>
          Profile
        </MenuItem>
        <MenuItem icon={<Logout size={16} />} type="error" onClick={() => { console.log('Logout clicked'); closeMenu(); }}>
          Logout
        </MenuItem>
      </Menu>
    )}
  </>
)}
</MenuContainer>

Custom styled button

<MenuButton
  onClick={toggleMenu}
  showChevron
  bgColor="bg-gray-900"
  hoverColor="hover:bg-gray-100 hover:text-gray-800"
  borderRadius="rounded-none"
  borderColor="border border-gray-900 hover:border-gray-300"
  padding="px-4 py-2"
  textSize="text-base"
  textColor="text-white"
>
  Custom menu
</MenuButton>

Usage

To create a dropdown menu, import the MenuContainer, MenuButton, Menu, and MenuItem components. The Menu component can be referenced in the following format:

import MenuContainer from "../../components/MenuContainer";
import MenuButton from "../../components/MenuButton";
import Menu from "../../components/Menu";
import MenuItem from "../../components/MenuItem";

Accessibility

The MenuButton uses role=“button” and can be triggered using a keyboard. Future improvements should include adding aria-haspopup=“menu” and dynamically setting aria-expanded to reflect the menu open state.