Menubar

Renders a menu bar that may contain a group of menu items that control other submenus.

Code examples

<Menubar>
  <MenuProvider>
    <MenuItem render={<MenuButton />}>File</MenuItem>
    <Menu>
      <MenuItem>New File</MenuItem>
      <MenuItem>New Window</MenuItem>
    </Menu>
  </MenuProvider>
  <MenuProvider>
    <MenuItem render={<MenuButton />}>Edit</MenuItem>
    <Menu>
      <MenuItem>Undo</MenuItem>
      <MenuItem>Redo</MenuItem>
    </Menu>
  </MenuProvider>
</Menubar>
<Menubar>
  <MenuProvider>
    <MenuItem render={<MenuButton />}>File</MenuItem>
    <Menu>
      <MenuItem>New File</MenuItem>
      <MenuItem>New Window</MenuItem>
    </Menu>
  </MenuProvider>
  <MenuProvider>
    <MenuItem render={<MenuButton />}>Edit</MenuItem>
    <Menu>
      <MenuItem>Undo</MenuItem>
      <MenuItem>Redo</MenuItem>
    </Menu>
  </MenuProvider>
</Menubar>

Optional Props

accessibleWhenDisabled

boolean | undefined
boolean | undefined

Indicates whether the element should be focusable even when it is disabled.

This is important when discoverability is a concern. For example:

A toolbar in an editor contains a set of special smart paste functions that are disabled when the clipboard is empty or when the function is not applicable to the current content of the clipboard. It could be helpful to keep the disabled buttons focusable if the ability to discover their functionality is primarily via their presence on the toolbar.

Learn more on Focusability of disabled controls.

autoFocus

boolean | undefined = false
boolean | undefined = false

Automatically focuses the element upon mounting, similar to the native autoFocus prop. This addresses an issue where the element with the native autoFocus attribute might receive focus before React effects are executed.

The autoFocus prop can also be used with Focusable elements within a Dialog component, establishing the initial focus as the dialog opens.

Live examples

composite

boolean | undefined = true
boolean | undefined = true

Whether the component should behave as a composite widget. This prop should be set to false when combining different composite widgets where only one should behave as such.

disabled

boolean | undefined = false
boolean | undefined = false

Determines if the element is disabled. This sets the aria-disabled attribute accordingly, enabling support for all elements, including those that don't support the native disabled attribute.

This feature can be combined with the accessibleWhenDisabled prop to make disabled elements still accessible via keyboard.

Live examples

focusable

boolean | undefined = true
boolean | undefined = true

Determines if Focusable features should be active on non-native focusable elements.

Note: This prop only turns off the additional features provided by the Focusable component. Non-native focusable elements will lose their focusability entirely. However, native focusable elements will retain their inherent focusability, but without added features such as improved autoFocus, accessibleWhenDisabled, onFocusVisible, etc.

focusLoop

boolean | Orientation = false
boolean | Orientation = false

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

On one-dimensional composites:

• 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 composites (when using CompositeRow):

• 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 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.

focusOnMove

boolean | undefined = true
boolean | undefined = true

Whether the active composite item should receive focus when store.move is called.

moveOnKeyPress

BooleanOrCallback<React.KeyboardEvent<HTMLElement>> | undefined = true
BooleanOrCallback<React.KeyboardEvent<HTMLElement>> | undefined = true

Whether the composite widget should move focus to an item when pressing arrow keys.

onFocusVisible

BivariantCallback<(event: React.SyntheticEvent<HTMLElement, Event>) => void> | undefined
BivariantCallback<(event: React.SyntheticEvent<HTMLElement, Event>) => void> | undefined

Custom event handler invoked when the element gains focus through keyboard interaction or a key press occurs while the element is in focus. This is a programmatic equivalent of the data-focus-visible attribute.

Live examples

orientation

Orientation = "both"
Orientation = "both"

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.

rtl

boolean = false
boolean = false

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.

store

MenubarStore | undefined
MenubarStore | undefined

Object returned by the useMenubarStore hook. If not provided, the closest MenubarProvider component context will be used. If the component is not wrapped in a MenubarProvider component, an internal store will be used.

virtualFocus

boolean = false
boolean = false

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.

Live examples