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

import Menubar from "@/components/ui/menubar/Menubar.astro";
import MenubarMenu from "@/components/ui/menubar/MenubarMenu.astro";
import MenubarTrigger from "@/components/ui/menubar/MenubarTrigger.astro";
import MenubarContent from "@/components/ui/menubar/MenubarContent.astro";
import MenubarItem from "@/components/ui/menubar/MenubarItem.astro";
import MenubarSeparator from "@/components/ui/menubar/MenubarSeparator.astro";
import MenubarShortcut from "@/components/ui/menubar/MenubarShortcut.astro";

Usage

import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarSeparator,
MenubarShortcut,
MenubarTrigger,
} from "@/components/ui/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