Menubar

PreviewCopy Anchor Link

UsageCopy Anchor Link

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from '@vitnode/core/components/ui/menubar'

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent className="w-56">
      <MenubarItem>
        New tab
        <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print...</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent className="w-56">
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Each MenubarMenu is a trigger plus its content. Open one, then hover the next trigger: it opens straight away, like a desktop menu bar.

SubmenusCopy Anchor Link

Nest a MenubarSub to tuck actions one level deeper. It opens on hover, click or the right arrow.

<MenubarSub>
  <MenubarSubTrigger>Share</MenubarSubTrigger>
  <MenubarSubContent className="w-44">
    <MenubarItem>Email link</MenubarItem>
  </MenubarSubContent>
</MenubarSub>

Checkbox and radio itemsCopy Anchor Link

Open View and Profiles above. MenubarCheckboxItem toggles on its own, items in a MenubarRadioGroup pick one. Both work controlled or uncontrolled.

<MenubarCheckboxItem checked={showBookmarks} onCheckedChange={setShowBookmarks}>
  Always show bookmarks bar
</MenubarCheckboxItem>
<MenubarRadioGroup onValueChange={setProfile} value={profile}>
  <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
</MenubarRadioGroup>

The check mark sits at the start of the row, like in the Dropdown Menu. Add inset to plain items, labels and sub-triggers in the same menu so their text lines up.

Shortcuts and destructive itemsCopy Anchor Link

MenubarShortcut is only a label: bind the keys yourself. Use variant="destructive" for actions you can't take back.

<MenubarItem>
  Undo
  <MenubarShortcut>⌘Z</MenubarShortcut>
</MenubarItem>
<MenubarItem variant="destructive">Close all windows</MenubarItem>

AccessibilityCopy Anchor Link

• The bar is one tab stop. Left and right arrows move between menus, and move the open menu with you.
• Inside a menu, up and down move between items, right opens a submenu, a letter jumps to a match and Escape returns focus to the trigger.
• Triggers and rows grow to a 44px tap target on touch screens.
• Switching between open menus is instant. Reduced motion turns the scale-in off.
• A menu bar is a desktop pattern. On small screens keep it short, or offer the same actions in a Dropdown Menu.

PropsCopy Anchor Link

MenubarCopy Anchor Link

MenubarContentCopy Anchor Link

MenubarItemCopy Anchor Link

MenubarCheckboxItem takes checked, defaultChecked and onCheckedChange. MenubarRadioGroup takes value, defaultValue and onValueChange. Both item types accept inset and disabled. MenubarMenu takes open, defaultOpen and onOpenChange to drive one menu yourself.

API ReferenceCopy Anchor Link

Base UI - Menubar