Menubar

Component Installation Guide

npx shadcn@latest add menubar

Implementing the Menubar

  Menubar, // The root container for the entire menubar.
  MenubarCheckboxItem, // A menu item variant that functions as a checkbox.
  MenubarContent, // The dropdown panel containing items for a specific menu.
  MenubarGroup, // Optional component to group related items within a menu.
  MenubarItem, // Represents a single standard action or option within a menu.
  MenubarLabel, // A non-interactive text label within a menu.
  MenubarMenu, // Represents a single top-level menu category (e.g., "File", "Edit").
  MenubarPortal, // Used for advanced portal rendering if needed.
  MenubarRadioGroup, // Container for a group of radio button menu items.
  MenubarRadioItem, // A menu item variant that functions as a radio button.
  MenubarSeparator, // A visual separator line between groups or items.
  MenubarShortcut, // Displays keyboard shortcut text associated with an item.
  MenubarSub, // Container for creating nested sub-menus.
  MenubarSubContent, // The content panel for a sub-menu.
  MenubarSubTrigger, // An item that triggers the opening of a sub-menu.
  MenubarTrigger, // The clickable element (e.g., "File") that opens a specific menu's content.
} from "@/components/ui/menubar"; // Adjust import path as necessary.

<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>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>{/* ... Edit menu items ... */}</MenubarContent>
  </MenubarMenu>
</Menubar>

The structure involves a root <Menubar> containing one or more <MenubarMenu> components. Each <MenubarMenu> has a <MenubarTrigger> (the visible top-level text) and <MenubarContent> (the dropdown). Inside the content, you arrange <MenubarItem>, <MenubarSeparator>, <MenubarCheckboxItem>, <MenubarRadioGroup>, and <MenubarSub> components to build the desired menu hierarchy and functionality, similar to a Dropdown Menu.