mirror of
https://github.com/bitwarden/browser
synced 2025-12-15 07:43:35 +00:00
41 lines
1.2 KiB
Plaintext
41 lines
1.2 KiB
Plaintext
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.
|