MenusReact

Menubar

A menu bar with commands and options for your application, as in a desktop app.

Rendered by React 19.3.1

import { Menu } from '@hamur/react/menu'
import { Menubar } from '@hamur/react/menubar'

const menus = [
  { label: 'File', items: ['New file', 'Open...', 'Save'] },
  { label: 'Edit', items: ['Undo', 'Redo', 'Cut', 'Copy', 'Paste'] },
  { label: 'View', items: ['Zoom in', 'Zoom out', 'Full screen'] },
]

export default function MenubarExample() {
  return (
    <Menubar style={{ display: 'flex', gap: 4 }}>
      {menus.map((menu) => (
        <Menu.Root key={menu.label}>
          <Menu.Trigger className="button">{menu.label}</Menu.Trigger>
          <Menu.Portal>
            <Menu.Positioner sideOffset={6}>
              <Menu.Popup className="menu">
                {menu.items.map((item) => (
                  <Menu.Item key={item} className="menu-item">
                    {item}
                  </Menu.Item>
                ))}
              </Menu.Popup>
            </Menu.Positioner>
          </Menu.Portal>
        </Menu.Root>
      ))}
    </Menubar>
  )
}

198Tests passing in React · 0 failing

8.0 KiBSize

Not measured yetMemory

Not measured yetSpeed

productdevbook and 13 upstream authors8 commits · last Nov 4

Installation

npm i @hamur/react

Not on npm yet. The package goes out under the chosen name.

Anatomy

Import the component and assemble its parts:

<Menubar />

Examples

The demo at the top is the one example this component has so far.

API reference

4 props across 1 parts, in React syntax. className, style, render are listed once, under Shared props.

Menubar`Menubar`

The container for menus.

Menubar props
Prop	Type	Default
`loopFocus`Whether to loop keyboard focus back to the first item	`boolean`	`true`
`modal`Whether the menubar is modal.	`boolean`	`true`
`disabled`Whether the whole menubar is disabled.	`boolean`	`false`
`orientation`The orientation of the menubar.	`MenuRootOrientation`	`'horizontal'`

Menubar data attributes
Data attribute	Description
`data-modal`	Present when the corresponding menubar is modal.
`data-orientation`	Determines the orientation of the menubar.
`data-has-submenu-open`	Present when any submenu within the menubar is open.

Shared props

Every part that renders an element takes these.

Shared props
Prop	Type
`className`CSS class applied to the element, or a function that returns a class based on the component's state.	`string \| ((state: State) => string \| undefined)`
`style`Style applied to the element, or a function that returns a style object based on the component's state.	`React.CSSProperties \| ((state: State) => React.CSSProperties \| undefined)`
`render`Allows you to replace the component's HTML element with a different tag, or compose it with another component.	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, State>`

Keyboard and accessibility

Keyboard

Keyboard
Keys	Does	Part
`ArrowLeftArrowRight`	Moves between the menus' triggers	Menubar
`HomeEnd`	Moves to the first or last trigger	Menubar
`Space`	Opens the focused menu	Menubar
`ArrowDownArrowUp`	Moves through the open menu's items	Menubar
`ArrowLeftArrowRight`	With a menu open, opens the previous or next menu instead	Menubar
`ArrowRight`	Opens a submenu	Menubar
`ArrowLeft`	Closes a submenu and returns focus to its trigger	Menubar
`Escape`	Closes the open menu	Menubar

Accessibility

What the parts set
Part	Sets	So that
Menubar	`role="menubar"`, `aria-orientation`	a screen reader announces a menu bar and which arrow keys move in it
Menubar	gives each Menu trigger inside `role="menuitem"`	the triggers are read as the bar's items

Focus order

The menubar is one tab stop: the last focused trigger, or the first.
Arrow keys move between triggers; with a menu open, they move into and across menus.
Escape closes the menu and leaves focus on its trigger.