Menu
Type: Component
A menu is a container for a list of choices. A choice is an interactable that performs some action.
It is represented in the DOM as a button with a role of menuitem or menuitemradio. Choices can
be grouped together by nesting menus, hence creating submenus.
info
The main children of this component are the MenuItem and MenuOptions components
Props#
isActive#
Type: boolean | Default: false
Whether the menu is visible or not.
Methods#
getEl#
Return Type: HTMLElement
The root HTML element of the component.
getChoices#
Return Type: <button>[]
List of currently available choices which are updated everytime the menu is opened.
getFocusedChoice#
Return Type: <button>|undefined
The currently focused choice.
info
A choice is focused when the menu is interacted with via a keyboard.
getFocusedChoiceIndex#
Return Type: int
The index of the currently focused choice. If it is -1 the no choice is currently focused.
info
A choice is focused when the menu is interacted with via a keyboard.
getSubmenu#
Parameters: (choice: <button>) | Return Type: HTMLElement|null
The menu element associated with the given choice.
focus#
Sets browser focus on the menu.
focusChoice#
Parameters: (index: int)
Sets browser focus on the choice at the given index.
focusController#
Sets browser focus on the menu controller. The controller is the DOM element with an id matching
the aria-labelledby property.
Events#
open#
Data Type: undefined
Fired when the menu becomes visible.
close#
Data Type: undefined
Fired when the menu becomes hidden.
click#
Data Type: Event
Fired when the menu is clicked.
keydown#
Data Type: Event
Fired when the menu is focused and a key is pressed down.