Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Installation

npx shadcn@latest add https://reactdocs.canceydejean.dev/r/menubar.json

Usage

Use a menubar for app chrome menus (File, Edit, View). Built on Base UI Menubar and dropdown menu primitives.

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarTrigger,
} from "@/components/menubar/menubar";

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New Tab</MenubarItem>
          <MenubarItem>New Window</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

Compose checkboxes, radio groups, submenus, separators, and shortcuts like other menu components.