### Drop direction='top'

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop renderLabel={() => <Button>button</Button>} direction="top">
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop direction='right'

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop renderLabel={() => <Button>button</Button>} direction="right">
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop direction='bottom'

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop renderLabel={() => <Button>button</Button>} direction="bottom">
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop direction='left'

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop renderLabel={() => <Button>button</Button>} direction="left">
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop with coordinates

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

initialState = { isOpen: false };
const handleOnContextMenu = (e) => {
  e.preventDefault();
  setState({ isOpen: !state.isOpen });
};

<div>
  <div onContextMenu={handleOnContextMenu}>WatWatWat? x=200 y=200</div>
  <Drop
    coordinates={{ x: 200, y: 200 }}
    opened={state.isOpen}
    position="fixed"
    configAuto={{
      firstDirection: 'bottom-right',
      sequence: 'symmetrical',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop bottom clockwise

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop
    renderLabel={() => <Button>button</Button>}
    configAuto={{
      firstDirection: 'bottom',
      sequence: 'clockwise',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop bottom-start counterclockwise

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop
    renderLabel={() => <Button>button</Button>}
    configAuto={{
      firstDirection: 'bottom-start',
      sequence: 'counterclockwise',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop bottom-end symmetrical

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop
    renderLabel={() => <Button>button</Button>}
    configAuto={{
      firstDirection: 'bottom-end',
      sequence: 'symmetrical',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop top-left symmetrical

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop
    renderLabel={() => <Button>button</Button>}
    configAuto={{
      firstDirection: 'top-left',
      sequence: 'symmetrical',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```

### Drop bottom-right symmetrical

```jsx
const { Menu, MenuItem, MenuDivider } = require('../Menu');
const { Button } = require('../Button');

<div>
  <Drop
    renderLabel={() => <Button>button</Button>}
    configAuto={{
      firstDirection: 'bottom-right',
      sequence: 'symmetrical',
    }}
  >
    <Menu>
      <MenuItem>Item one</MenuItem>
      <MenuItem>(◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕) (◕‿◕)</MenuItem>
      <MenuDivider />
      <MenuItem>Item three</MenuItem>
    </Menu>
  </Drop>
</div>;
```