Navigation

Menubar

A horizontal File/Edit/View-style menu bar — multiple top-level triggers coordinated with roving keyboard navigation, each opening a DropdownMenu-style dropdown.

MenubarDropdownMenu

Preview

Arrow keys move between triggers; Left/Right switches which menu is open while one is active.

Usage

tsx

import { Menubar, DropdownMenu } from "@vesture/react";
import type { MenubarItem } from "@vesture/react";

const items: MenubarItem[] = [
  {
    id: "file",
    label: "File",
    content: (
      <>
        <DropdownMenu.Item onSelect={() => newFile()}>New File</DropdownMenu.Item>
        <DropdownMenu.Item onSelect={() => openFile()}>Open…</DropdownMenu.Item>
      </>
    ),
  },
  {
    id: "edit",
    label: "Edit",
    content: (
      <>
        <DropdownMenu.Item onSelect={() => undo()}>Undo</DropdownMenu.Item>
        <DropdownMenu.Item onSelect={() => redo()}>Redo</DropdownMenu.Item>
      </>
    ),
  },
];

<Menubar items={items} />

Behavior

Only one top-level menu is open at a time. Clicking a trigger, or focusing it and pressing ArrowDown, opens its dropdown, built on the same DropdownMenu item/keyboard-nav internals used elsewhere.
Left/Right arrow moves between top-level triggers; if a menu is currently open, pressing Left/Right closes it and opens the adjacent one instead of just moving focus — arrowing across File/Edit/View while one is open switches which is open, no re-click needed.
Escape closes the open menu and returns focus to its trigger.

Props

Prop	Type	Default	Description
items	MenubarItem[]	—	Required. { id, label, content } — content is typically DropdownMenu.Item elements.