Menu

The <Menu /> component is an accessibility-focused dropdown menu.

Built on top of the Reach UI Menu Button.

When To Use:#

When you need to trigger actions from a dropdown (such as when clicking in the menu of a desktop application).

⚠️

Do not use this if you need to store a value. Use a <select /> component instead.

Copy
import {
  MenuContainer,
  MenuButton,
  MenuList,
  MenuItem,
  MenuLink,
} from 'minerva-ui';

With Divider#

Actions 
<MenuContainer>
  <MenuButton>
    Actions <Icon name="chevron-down" ml={2} size="14px" />
  </MenuButton>
  <MenuList>
    <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
    <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem>
    <MenuDivider />
    <MenuLink href="https://minerva-ui-docs.vercel.app/">Sign Out</MenuLink>
  </MenuList>
</MenuContainer>
<MenuContainer>
  <MenuButton>
    Actions <Icon name="chevron-down" ml={2} size="14px" />
  </MenuButton>
  <MenuList>
    <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
    <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem>
    <MenuDivider />
    <MenuLink href="https://minerva-ui-docs.vercel.app/">Sign Out</MenuLink>
  </MenuList>
</MenuContainer>

Positioned To Right#

Change alignment for MenuList relative to parent

Actions 
<Flex justifyContent="flex-end">
  <MenuContainer>
    <MenuButton>
      Actions <Icon name="chevron-down" ml={2} size="14px" />
    </MenuButton>
    <MenuList menuPosition="right">
      <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
      <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem>
    </MenuList>
  </MenuContainer>
</Flex>
<Flex justifyContent="flex-end">
  <MenuContainer>
    <MenuButton>
      Actions <Icon name="chevron-down" ml={2} size="14px" />
    </MenuButton>
    <MenuList menuPosition="right">
      <MenuItem onSelect={() => alert('Edit Profile')}>Edit Profile</MenuItem>
      <MenuItem onSelect={() => alert('Settings')}>Settings</MenuItem>
    </MenuList>
  </MenuContainer>
</Flex>

Props#

Most props are extended from Reach UI's <MenuButton /> component

<Menu />#

<MenuButton />#

<MenuList />#

<MenuItem />#

<MenuLink />#

Similar to <MenuItem />, but used for links (renders an <a /> tag)