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,
  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>

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>

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
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