Menu

This component renders a dropdown menu. It is based on the MenuButton component from Reach UI.

Usage

import { Menu, MenuItem } from '@binarycapsule/ui-capsules';

Demo

View source on GitHub

Knobs 🎛

No knobs availablePlease, follow the Reach UI docs to learn how to use this component
const Trigger = styled(IconButton)(({ theme }) => ({
  '&[data-reach-menu-button][aria-expanded="true"]': {
    background: theme.colors.neutral200,
  },
}));

<Menu>
  <MenuButton as={Trigger} variant="ghostGray" icon="dots_h" />
  <MenuList>
    <MenuItem onSelect={() => {}}>Menu item #1</MenuItem>
    <MenuItem onSelect={() => {}}>Menu item #2</MenuItem>
    <MenuItem onSelect={() => {}}>Menu item #3</MenuItem>
    <MenuItem onSelect={() => {}}>
      <Flex align="center">
        <Icon icon="beaker" css={{ marginRight: 4 }} />
        Beaker
      </Flex>
    </MenuItem>
  </MenuList>
</Menu>