useMenuTriggerState

Manages state for a menu trigger. Tracks whether the menu is currently open, and controls which item will receive focus when it opens. Also tracks the open submenus within the menu tree via their trigger keys.

installyarn add react-stately
version3.30.0
usageimport {useMenuTriggerState} from 'react-stately'

API#


useMenuTriggerState( (props: MenuTriggerProps )): RootMenuTriggerState

Interface#


Properties

NameTypeDescription
UNSTABLE_openSubmenu( (triggerKey: Key, , level: number )) => voidOpens a specific submenu tied to a specific menu item at a specific level.
UNSTABLE_closeSubmenu( (triggerKey: Key, , level: number )) => voidCloses a specific submenu tied to a specific menu item at a specific level.
UNSTABLE_expandedKeysStackKey[]

An array of open submenu trigger keys within the menu tree. The index of key within array matches the submenu level in the tree.

close() => voidCloses the menu and all submenus in the menu tree.
focusStrategyFocusStrategyControls which item will be auto focused when the menu opens.
isOpenbooleanWhether the overlay is currently open.

Methods

MethodDescription
open( (focusStrategy?: FocusStrategynull )): voidOpens the menu.
toggle( (focusStrategy?: FocusStrategynull )): voidToggles the menu.
setOpen( (isOpen: boolean )): voidSets whether the overlay is open.

Example#


See the docs for useMenu in react-aria for an example of useMenuTriggerState.