MenuProvider

A callback that gets called when the values state changes.

Live examples:

• MenuItemCheckbox
• Submenu with Combobox

A reference to a combobox store. It's automatically set when composing Menu with Combobox.

A reference to a parent menu store. It's automatically set when nesting menus in the React tree. You should manually set this if menus aren't nested in the React tree.

Live examples:

• Menubar
• Submenu
• Navigation Menubar

A reference to a menubar store. It's automatically set when rendering menus inside a Menubar in the React tree.

Live examples:

• Navigation Menubar

Defines the orientation of the composite widget. If the composite has a single row or column (one-dimensional), the orientation value determines which arrow keys can be used to move focus:

• both: all arrow keys work.
• horizontal: only left and right arrow keys work.
• vertical: only up and down arrow keys work.

It doesn't have any effect on two-dimensional composites.

The placement of the popover.

Live examples:

• Submenu with Combobox
• Sliding Menu
• Navigation Menubar
• Selection Popover
• Standalone Popover
• Select Grid

The amount of time in milliseconds to wait before hiding the popup. It defaults to the value passed to timeout.

Live examples:

• Navigation Menubar
• Tooltip with Framer Motion

A map of names and values that will be used by the MenuItemCheckbox and MenuItemRadio components.

Live examples:

• MenuItemCheckbox
• Submenu with Combobox

Lists all items along with their metadata. This state is automatically updated when an item is registered or unregistered using the registerItem function.

If enabled, the composite element will act as an aria-activedescendant container instead of roving tabindex. DOM focus will remain on the composite element while its items receive virtual focus.

In both scenarios, the item in focus will carry the data-active-item attribute.

Live examples:

• Select with Combobox and Tabs

Determines how the next and previous functions will behave. If rtl is set to true, they will be inverted.

This only affects the composite widget behavior. You still need to set dir="rtl" on HTML/CSS.

Determines how the focus behaves when the user reaches the end of the composite widget.

On one-dimensional composite widgets:

• true loops from the last item to the first item and vice-versa.
• horizontal loops only if orientation is horizontal or not set.
• vertical loops only if orientation is vertical or not set.
• If includesBaseElement is set to true (or activeId is initially set to null), the composite element will be focused in between the last and first items.

On two-dimensional composite widgets (when using CompositeRow or explicitly passing a rowId prop to composite items):

• true loops from the last row/column item to the first item in the same row/column and vice-versa. If it's the last item in the last row, it moves to the first item in the first row and vice-versa.
• horizontal loops only from the last row item to the first item in the same row.
• vertical loops only from the last column item to the first item in the column row.
• If includesBaseElement is set to true (or activeId is initially set to null), vertical loop will have no effect as moving down from the last row or up from the first row will focus on the composite element.
• If focusWrap matches the value of focusLoop, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Live examples:

• Command Menu

Works only on two-dimensional composite widgets.

If enabled, moving to the next item from the last one in a row or column will focus on the first item in the next row or column and vice-versa.

• true wraps between rows and columns.
• horizontal wraps only between rows.
• vertical wraps only between columns.
• If focusLoop matches the value of focusWrap, it'll wrap between the last item in the last row or column and the first item in the first row or column and vice-versa.

Works only on two-dimensional composite widgets.

If enabled, moving up or down when there's no next item or when the next item is disabled will shift to the item right before it.

Indicates if the composite base element (the one with a composite role) should be part of the focus order when navigating with arrow keys. In other words, moving to the previous element when the first item is in focus will focus on the composite element itself. The same applies to the last item when moving to the next element.

Live examples:

• Submenu with Combobox
• Command Menu

The current active item id. The active item is the element within the composite widget that has either DOM or virtual focus (in case virtualFocus is enabled).

• null represents the base composite element (the one with a composite role). Users will be able to navigate out of it using arrow keys.
• If activeId is initially set to null, the includesBaseElement prop will also default to true, which means the base composite element itself will have focus and users will be able to navigate to it using arrow keys.

Live examples:

• Combobox with Tabs

The amount of time in milliseconds to wait before showing and hiding the popup. To control the delay for showing and hiding separately, use showTimeout and hideTimeout.

The amount of time in milliseconds to wait before showing the popup. It defaults to the value passed to timeout.

Live examples:

• Navigation Menubar
• Submenu with Combobox

Whether the content is visible.

Live examples:

• Combobox with links
• Dialog with React Router
• Menu with Framer Motion
• Lazy Popover

Determines whether the content should animate when it is shown or hidden.

• If true, the animating state will be true when the content is shown or hidden and it will wait for a CSS animation/transition to end before becoming false.
• If it's set to a number, the animating state will be true when the content is shown or hidden and it will wait for the number of milliseconds to pass before becoming false.

The default values for the values state.

Live examples:

• MenuItemCheckbox
• MenuItemRadio

The composite item id that should be active by default when the composite widget is rendered. If null, the composite element itself will have focus and users will be able to navigate to it using arrow keys. If undefined, the first enabled item will be focused.

The defaut value for the items state.

A reference to another popover store that's controlling another popover to keep them in sync.

Whether the content should be visible by default.

A callback that gets called when the activeId state changes.

A callback that gets called when the items state changes.

A callback that gets called when the open state changes.

A callback that gets called when the mounted state changes.

A reference to another disclosure store that controls another disclosure component to keep them in sync. Element states like contentElement and disclosureElement won't be synced. For that, use the store prop instead.

Live examples:

• Command Menu

Another store object that will be kept in sync with the original store.

Live examples:

• Navigation Menubar