mirror of
https://github.com/bitwarden/browser
synced 2026-02-06 11:43:51 +00:00
46 lines
1.6 KiB
Plaintext
46 lines
1.6 KiB
Plaintext
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.)
|