Menubar

Install

pnpm dlx shadcn@latest add @namche/menubar

Usage

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Cluster</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Deploy</MenubarItem>
      <MenubarItem variant="destructive">Delete cluster</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Each MenubarMenu is a DropdownMenu under the hood, and MenubarContent is DropdownMenuContent with different defaults (alignOffset={-4}, sideOffset={8}) — so MenubarItem, MenubarCheckboxItem, MenubarRadioGroup/MenubarRadioItem, MenubarSub/MenubarSubTrigger/ MenubarSubContent, and MenubarShortcut all behave like their dropdown-menu counterparts. Menubar itself just lays its MenubarMenu children out in a bordered row and coordinates roving focus between them.