@navinc/base-react-components
Version:
Nav's Pattern Library
13 lines (9 loc) • 1.1 kB
Markdown
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>