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

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.