Menubar

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Cut <MenubarShortcut>⌘X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Copy <MenubarShortcut>⌘C</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Paste <MenubarShortcut>⌘V</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Zoom In</MenubarItem>
      <MenubarItem>Zoom Out</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Full Screen</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Installation

npx bearnie add menubar

Usage

import {
  Menubar,
  MenubarContent,
  MenubarMegaItem,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/bearnie/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Checkbox

Use MenubarCheckboxItem for toggleable options.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
      <MenubarCheckboxItem>Show Sidebar</MenubarCheckboxItem>
      <MenubarCheckboxItem checked>Show Status Bar</MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value="personal">
        <MenubarRadioItem value="personal">Personal</MenubarRadioItem>
        <MenubarRadioItem value="work">Work</MenubarRadioItem>
        <MenubarRadioItem value="team">Team</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Icons

Use MenubarMegaItem variant="simple" in a regular MenubarContent when you just want a compact icon list without the larger mega-menu layout.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Status</MenubarTrigger>
    <MenubarContent class="w-56">
      <MenubarMegaItem variant="simple" title="Backlog">
        <HugeIcon slot="icon" icon={Alert02Icon} />
      </MenubarMegaItem>
      <MenubarMegaItem variant="simple" title="To Do">
        <HugeIcon slot="icon" icon={CircleIcon} />
      </MenubarMegaItem>
      <MenubarMegaItem variant="simple" title="Done">
        <HugeIcon slot="icon" icon={Tick02Icon} />
      </MenubarMegaItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New File</MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>AirDrop</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Export</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Use variant="mega" on MenubarContent with MenubarMegaItem when one trigger needs grouped navigation links and descriptions.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Getting started</MenubarTrigger>
    <MenubarContent variant="mega" class="w-[min(32rem,calc(100vw-2rem))]">
      <div class="grid gap-1">
        <MenubarMegaItem
          title="Introduction"
          description="Reusable components built with Tailwind CSS."
          href="/docs"
        />
        <MenubarMegaItem
          title="Installation"
          description="How to install dependencies and structure your app."
          href="/docs/installation"
        />
        <MenubarMegaItem
          title="Typography"
          description="Styles for headings, paragraphs, lists, and more."
          href="/system/typography"
        />
      </div>
    </MenubarContent>
  </MenubarMenu>

  <MenubarMenu>
    <MenubarTrigger>Components</MenubarTrigger>
    <MenubarContent variant="mega" class="w-[min(40rem,calc(100vw-2rem))]">
      <div class="grid gap-1 sm:grid-cols-2 sm:gap-x-2 sm:gap-y-1">
        <MenubarMegaItem
          title="Alert Dialog"
          description="A modal dialog that interrupts the user with important content."
          href="/docs/components/alert-dialog"
        />
        <MenubarMegaItem
          title="Hover Card"
          description="For sighted users to preview content available behind a link."
          href="/docs/components/hover-card"
        />
        <MenubarMegaItem
          title="Progress"
          description="Displays an indicator showing the completion progress of a task."
          href="/docs/components/progress"
        />
        <MenubarMegaItem
          title="Tooltip"
          description="A popup that displays information related to an element."
          href="/docs/components/tooltip"
        />
      </div>
    </MenubarContent>
  </MenubarMenu>

</Menubar>

Props

Prop	Type	Default	Description
class	string	-	Additional CSS classes

MenubarTrigger

Prop	Type	Default	Description
class	string	-	Additional CSS classes

MenubarContent

Prop	Type	Default	Description
align	“start” \| “center” \| “end”	“start”	Alignment of the content
sideOffset	number	4	Offset from the trigger
variant	“default” \| “mega”	“default”	Switches between compact dropdown and wider mega-menu styling
class	string	-	Additional CSS classes

MenubarItem

Prop	Type	Default	Description
inset	boolean	false	Adds left padding for alignment
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

MenubarCheckboxItem

Prop	Type	Default	Description
checked	boolean	false	Initial checked state
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

MenubarRadioGroup

Prop	Type	Default	Description
value	string	-	Initial selected value
class	string	-	Additional CSS classes

MenubarRadioItem

Prop	Type	Default	Description
value	string	-	Value of the radio item
disabled	boolean	false	Disables the item
class	string	-	Additional CSS classes

MenubarMegaItem

Prop	Type	Default	Description
title	string	-	Main heading text for the mega-menu entry
description	string	-	Optional supporting description text
href	string	-	Renders the entry as a link when provided
disabled	boolean	false	Disables the item
variant	“default” \| “simple”	“default”	Uses either stacked description rows or a simple inline icon/list layout
class	string	-	Additional CSS classes

Menubar

Installation

Usage

Examples

Checkbox

Radio

Icons

Submenu

Mega menu

Props

Menubar

MenubarTrigger

MenubarContent

MenubarItem

MenubarCheckboxItem

MenubarRadioGroup

MenubarRadioItem

MenubarMegaItem