import { Meta, Canvas, Primary, Controls } from "@storybook/addon-docs/blocks";

import * as stories from "./menu.stories";

<Meta of={stories} />

# Menu

Menus are used to help organize related options. Menus are most often used for item options in
tables.

<Canvas of={stories.ClosedMenu} />

<br />

## Slots

`bitMenuItem` supports the following slots:

| Slot           | Description                                         |
| -------------- | --------------------------------------------------- |
| default        | primary text or arbitrary content                   |
| `slot="start"` | commonly an icon or avatar; before the default slot |
| `slot="end"`   | commonly an icon; after the default slot            |

```html
<button type="button" bitMenuItem>
  <i class="bwi bwi-key" slot="start"></i>
  Menu item with icons
  <i class="bwi bwi-angle-right" slot="end"></i>
</button>
```

## Accessibility

Follow WCAG AA best practices. Example: Insure the triggering element has `aria-haspopup="true"`
prior to being clicked and `aria-expanded="true"` after the user clicks the element.

User should be able to navigate the opened menu via the up and down arrow keys and close the menu
using the escape key or clicking out of the menu.

Are you using a menu item to open a dialog? Be sure to pass the `restoreFocus` config option to the
`dialog.open` method, specifying where the user's focus should return to upon dialog close. (The
menu closes when the dialog launches, so the built-in strategy of returning focus to the trigger
element is not possible, since the trigger element menu item is gone.)