Menubar

A desktop-style menu bar: File, Edit, View…

MenubarProps packages/core/src/extra-controls.ts:1005 ↗

Import

import { Menubar } from "@tarve/core";

Usage

Menubar.tsx

import { Menubar } from "@tarve/core";

let openMenu: string | undefined;

<Menubar
  openMenu={openMenu}
  menus={[
    {
      value: "file",
      label: "File",
      items: [
        { value: "new", label: "New", shortcut: "Ctrl+N" },
        { value: "open", label: "Open…", shortcut: "Ctrl+O" },
      ],
    },
    { value: "edit", label: "Edit", items: [{ value: "undo", label: "Undo", shortcut: "Ctrl+Z" }] },
  ]}
  onOpenMenuChange={(value) => {
    openMenu = value;
  }}
  onSelect={(menu, item) => console.log(menu, item)}
/>

Props

Prop	Type	Default
`menus` required	`MenubarMenu[]`	—
`onOpenMenuChange`	`(value: string \| undefined) => void`	—
`onSelect`	`(menuValue: string, itemValue: string) => void`	—
`openMenu`	`string`	—

Common props

Shared by every component. See descriptions →

childrenhighlightidkeymotionFromonHighlightonPasteonTransitionEndrovingGroupstyle

Types

MenubarMenu

interface MenubarMenu {
  value: string;
  label: string;
  disabled?: boolean;
  items: MenubarItem[];
}