Menubar

A desktop style app menubar built on Base UI: a row of triggers that each open a dropdown of items, with keyboard navigation between menus. shadcn compatible.

src/registry/ui/menubar.tsx/r/menubar.json

Installation#

bash

npx shadcn@latest add @minidev/menubar

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/menubar.json

Usage#

tsx

import { Menubar } from "@/components/ui/menubar"

export function Example() {
  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>New…</MenubarItem>
          <MenubarItem>Open…</MenubarItem>
          <MenubarItem>Save</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Undo</MenubarItem>
          <MenubarItem>Redo</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}