Version: 1.x

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.