A basic menu opens _below_ the anchor element by default. When close to a screen edge, a basic menu vertically realigns to make sure that all menu items are completely visible.

The `onClose` callback is called when pressing <kbd>Esc</kbd>, <kbd>Tab</kbd>, or clicking outside the menu.

### Basic usage

<ol style="list-style: decimal;">
  <li>Define a <code>anchorEl</code> to set the position of the menu. The anchor element (ie. button) is <em>NOT</em> part of this component.</li>
  <li>Bind <code>open</code> and <code>onClose</code> props.</li>
  <li>Use <code>MenuItem</code> as children for default button styling. Set a <code>tabIndex</code> for each item to enable keyboard navigation. Children accepts anything for more customized usage. If <code>MenuItem</code> or button is not the first child element, then apply <code>autoFocus</code> prop on the child element you would like to first focus on when menu is opened.</li>
  <li>The menu aligns to the <em>bottom right</em> of the <code>anchorEl</code> by default. This can be customized using the <code>placement</code> prop.</li>
</ol>
