Menubar

Default

Usage

import { Menubar, MenubarMenu, MenubarGroup, MenubarPortal, MenubarRadioGroup, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioItem, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent } from '@tryvienna/ui'

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>Cmd+T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>Cmd+N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email Link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>Cmd+P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>Cmd+Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>Cmd+Shift+Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Cut <MenubarShortcut>Cmd+X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Copy <MenubarShortcut>Cmd+C</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Paste <MenubarShortcut>Cmd+V</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Select All <MenubarShortcut>Cmd+A</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem checked={showFullUrls} onCheckedChange={setShowFullUrls}>
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem inset>
        Reload <MenubarShortcut>Cmd+R</MenubarShortcut>
      </MenubarItem>
      <MenubarItem inset disabled>
        Force Reload <MenubarShortcut>Cmd+Shift+R</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
      <MenubarItem inset>Hide Sidebar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value={profile} onValueChange={setProfile}>
        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
        <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSeparator />
      <MenubarItem inset>Edit...</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Add Profile...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Default

Default

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>Cmd+T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>Cmd+N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email Link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>Cmd+P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>Cmd+Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>Cmd+Shift+Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Cut <MenubarShortcut>Cmd+X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Copy <MenubarShortcut>Cmd+C</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Paste <MenubarShortcut>Cmd+V</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Select All <MenubarShortcut>Cmd+A</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
        Always Show Bookmarks Bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem checked={showFullUrls} onCheckedChange={setShowFullUrls}>
        Always Show Full URLs
      </MenubarCheckboxItem>
      <MenubarSeparator />
      <MenubarItem inset>
        Reload <MenubarShortcut>Cmd+R</MenubarShortcut>
      </MenubarItem>
      <MenubarItem inset disabled>
        Force Reload <MenubarShortcut>Cmd+Shift+R</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Toggle Fullscreen</MenubarItem>
      <MenubarItem inset>Hide Sidebar</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value={profile} onValueChange={setProfile}>
        <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
        <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
        <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
      </MenubarRadioGroup>
      <MenubarSeparator />
      <MenubarItem inset>Edit...</MenubarItem>
      <MenubarSeparator />
      <MenubarItem inset>Add Profile...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Menubar

Also accepts all props from MenubarPrimitive.Root.

MenubarMenu

Also accepts all props from MenubarPrimitive.Menu.

MenubarGroup

Also accepts all props from MenubarPrimitive.Group.

MenubarPortal

Also accepts all props from MenubarPrimitive.Portal.

MenubarRadioGroup

Also accepts all props from MenubarPrimitive.RadioGroup.

MenubarTrigger

Also accepts all props from MenubarPrimitive.Trigger.

MenubarContent

Prop	Type	Default	Description
align	"center" | "start" | "end"	start
alignOffset	number	-4
sideOffset	number	8

Also accepts all props from MenubarPrimitive.Content.

MenubarItem

Prop	Type	Default	Description
inset	boolean | undefined	-
variant	"default" | "destructive"	default

Also accepts all props from MenubarPrimitive.Item.

MenubarCheckboxItem

Prop	Type	Default	Description
checked	CheckedState | undefined	-

Also accepts all props from MenubarPrimitive.CheckboxItem.

MenubarRadioItem

Also accepts all props from MenubarPrimitive.RadioItem.

MenubarLabel

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from MenubarPrimitive.Label.

MenubarSeparator

Also accepts all props from MenubarPrimitive.Separator.

MenubarShortcut

Also accepts all props from span.

MenubarSub

Also accepts all props from MenubarPrimitive.Sub.

MenubarSubTrigger

Prop	Type	Default	Description
inset	boolean | undefined	-

Also accepts all props from MenubarPrimitive.SubTrigger.

MenubarSubContent

Also accepts all props from MenubarPrimitive.SubContent.

Data Attributes

Component	data-slot
Menubar	"menubar"
MenubarMenu	"menubar-menu"
MenubarGroup	"menubar-group"
MenubarPortal	"menubar-portal"
MenubarRadioGroup	"menubar-radio-group"
MenubarTrigger	"menubar-trigger"
MenubarContent	"menubar-content"
MenubarItem	"menubar-item"
MenubarCheckboxItem	"menubar-checkbox-item"
MenubarRadioItem	"menubar-radio-item"
MenubarLabel	"menubar-label"
MenubarSeparator	"menubar-separator"
MenubarShortcut	"menubar-shortcut"
MenubarSub	"menubar-sub"
MenubarSubTrigger	"menubar-sub-trigger"
MenubarSubContent	"menubar-sub-content"