import {MenuTrigger, Menu, Popover, SubmenuTrigger, MenuSection, Separator} from 'react-aria-components';
import {Button} from './Button';
import {MenuItem} from './Menu';

<MenuTrigger>
  <Button aria-label="Actions">☰</Button>
  <Popover>
    <Menu>
      <MenuItem onAction={() => alert('open')}>Open</MenuItem>
      <MenuItem onAction={() => alert('rename')}>Rename…</MenuItem>
      <MenuItem onAction={() => alert('duplicate')}>Duplicate</MenuItem>
      <MenuItem onAction={() => alert('share')}>Share…</MenuItem>
      <SubmenuTrigger>
        <MenuItem>Share</MenuItem>
        <Popover>
          <Menu>
            <MenuItem>Email</MenuItem>
            <MenuItem>SMS</MenuItem>
            <MenuItem>Instagram</MenuItem>
          </Menu>
        </Popover>
      </SubmenuTrigger>
      <MenuItem onAction={() => alert('delete')}>Delete…</MenuItem>
      <Separator />
      <MenuSection selectionMode="multiple" defaultSelectedKeys={['files']}>
        <MenuItem id="files">Show files</MenuItem>
        <MenuItem id="folders">Show folders</MenuItem>
      </MenuSection>
    </Menu>
  </Popover>
</MenuTrigger>
Menu

Anatomy
