Package Exports
- @spectrum-web-components/menu-item
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@spectrum-web-components/menu-item) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Description
An <sp-menu /> is used for creating a menu list. The various elements inside a menu are given as <sp-menu-group/>, <sp-menu-item />, or <sp-menu-divider />.
Installation
npm install @spectrum-web-components/menu-item
# or
yarn add @spectrum-web-components/menu-itemVariants
Menu items
Menus are a collection of <sp-menu-items /> that can be modified to be disabled or selected.
<sp-menu>
<sp-menu-item>
Active menu item
</sp-menu-item>
<sp-menu-item disabled>
Disabled menu item
</sp-menu-item>
<sp-menu-item selected>
Selected menu item
</sp-menu-item>
</sp-menu>Organization
The content of a menu can be organized by either adding <sp-menu-divider /> elements to a flat list.
<sp-popover open style="position: relative">
<sp-menu>
<sp-menu-item>
Menu item 1a
</sp-menu-item>
<sp-menu-item>
Menu item 2a
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Menu item 3a
</sp-menu-item>
<sp-menu-item>
Menu item 1b
</sp-menu-item>
<sp-menu-divider></sp-menu-divider>
<sp-menu-item>
Menu item 2b
</sp-menu-item>
</sp-menu>
</sp-popover>Accessibility
<sp-menu />, <sp-menu-group />, and <sp-menu-item /> each deliver a different part of the wai-aria "menu" pattern and support the menu, group, and menuitem roles respectively. To support ease of keyboard navigation, only the first active or first selected <sp-menu-item /> can be accessed in the tab order. Once the focus has entered the menu the up and down arrow keys can be used to access the rest of the menu.