Menubar

A visually persistent menu common in desktop applications that provides quick access to a consistent set of commands.

Examples

Default

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘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>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Props

Menubar

Prop	Type	Default	Description
defaultValue	string	-	The value of the menu item that should be active when initially rendered.
value	string	-	The controlled value of the active menu item.
dir	ltr | rtl	-	The reading direction of the menubar.
loop	boolean	false	Whether the keyboard navigation should loop around.

Slots

Menubar

Slot	Description
default	The content of the menubar.

MenubarMenu

Slot	Description
default	The content of the menu.

MenubarTrigger

Slot	Description
default	The content of the trigger.

MenubarContent

Slot	Description
default	The items of the menubar menu.

MenubarItem

Slot	Description
default	The content of the menu item.