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,
  MenuDivider,
} 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>

With Custom Colored Selected Menu Item#

Actions 
() => {
  const [selectedItem, setSelectedItem] = useState('');

  return (
    <MenuContainer>
      <MenuButton>
        Actions <Icon name="chevron-down" ml={2} size="14px" />
      </MenuButton>
      <MenuList menuPosition="right">
        <MenuItem
          color={selectedItem === 'edit_profile' ? '#651FFF' : '#000'}
          fontWeight={selectedItem === 'edit_profile' ? 'bold' : 'normal'}
          onSelect={item => setSelectedItem('edit_profile')}
        >
          Edit Profile
        </MenuItem>
        <MenuItem
          color={selectedItem === 'settings' ? '#651FFF' : '#000'}
          fontWeight={selectedItem === 'settings' ? 'bold' : 'normal'}
          onSelect={item => setSelectedItem('settings')}
        >
          Settings
        </MenuItem>
      </MenuList>
    </MenuContainer>
  );
};
() => {
  const [selectedItem, setSelectedItem] = useState('');
  return (
    <MenuContainer>
      <MenuButton>
        Actions <Icon name="chevron-down" ml={2} size="14px" />
      </MenuButton>
      <MenuList menuPosition="right">
        <MenuItem
          color={selectedItem === 'edit_profile' ? '#651FFF' : '#000'}
          fontWeight={selectedItem === 'edit_profile' ? 'bold' : 'normal'}
          onSelect={item => setSelectedItem('edit_profile')}
        >
          Edit Profile
        </MenuItem>
        <MenuItem
          color={selectedItem === 'settings' ? '#651FFF' : '#000'}
          fontWeight={selectedItem === 'settings' ? 'bold' : 'normal'}
          onSelect={item => setSelectedItem('settings')}
        >
          Settings
        </MenuItem>
      </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)