Menu and Menu Items allow users to access and navigate pages, routes, or functionality within your application and experience.
Overview
Menu provides consistent structure for your application menu. It is most often slotted into Navigation, but it is also appropriate at times to place in other components, such as Shell Panel, Panel, and Flow.
Menu provides context to different portions of a user experience. Within one application, they may be used multiple times to provide different meaning to users.
Usage
- As the primary method of traversing an application or experience, within a Navigation component.
- Providing contextual location to a user within a portion of the interface, such as within a Panel.
- Within a Flow inside a Shell Panel.
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component. |
Tab and Shift | Moves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component. |
Enter | When a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state. |
Space | When a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state. |
Arrow down | When a calcite-menu-item is slotted in the component's "submenu-item", opens the sub-menu. When in a slotted submenu-item, navigates to the next calcite-menu-item, unless it is the last item, where focus will remain. |
Arrow up | When a calcite-menu-item is slotted in the component's "submenu-item", opens the sub-menu. When in a slotted submenu-item, navigates to the previous calcite-menu-item, unless it is the first item, where focus will remain. |
Arrow left | Moves focus to the next calcite-menu-item, unless it is the last item, where focus will remain. When a calcite-menu-item is slotted in the component's "submenu-item" and the sub-menu is open, focus shifts to the sub-menu's first item. |
Arrow right | Moves focus to the previous calcite-menu-item, unless it is the last item, where focus will remain. When a calcite-menu-item is slotted in the component's "submenu-item" and the sub-menu is open, focus shifts to the sub-menu's parent item. |
Esc | When a calcite-menu-item is slotted in the component's "submenu-item" and is open, will close the sub-menu and return focus to its parent. |