Menu

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

KeyFunction
TabMoves focus to the next focusable element. If the currently focused element is the last, the focus will leave the component.
Tab and ShiftMoves focus to the previous focusable element. If the currently focused element is the first, the focus will leave the component.
EnterWhen a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state.
SpaceWhen a calcite-menu-item is slotted in the component's "submenu-item", toggles the sub-menu's open state.
Arrow downWhen 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 upWhen 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 leftMoves 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 rightMoves 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.
EscWhen 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.

API reference

Properties

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.