Menubar

Application menu bar with dropdown menus, commonly used for desktop-style applications.

Basic

<HStack justify="center">
  <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 <MenubarShortcut>⌘+</MenubarShortcut>
        </MenubarItem>
        <MenubarItem>
          Zoom Out <MenubarShortcut>⌘-</MenubarShortcut>
        </MenubarItem>
        <MenubarSeparator />
        <MenubarItem>
          Toggle Fullscreen <MenubarShortcut>F11</MenubarShortcut>
        </MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</HStack>

With submenus

<HStack justify="center">
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>File</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>New File</MenubarItem>
        <MenubarSub>
          <MenubarSubTrigger>Open Recent</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>project-1.tsx</MenubarItem>
            <MenubarItem>project-2.tsx</MenubarItem>
            <MenubarItem>styles.css</MenubarItem>
            <MenubarSeparator />
            <MenubarItem>Clear Recent</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
        <MenubarSeparator />
        <MenubarItem>Save</MenubarItem>
        <MenubarItem>Save As...</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Edit</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>Undo</MenubarItem>
        <MenubarItem>Redo</MenubarItem>
        <MenubarSeparator />
        <MenubarSub>
          <MenubarSubTrigger>Find</MenubarSubTrigger>
          <MenubarSubContent>
            <MenubarItem>Find...</MenubarItem>
            <MenubarItem>Find and Replace...</MenubarItem>
            <MenubarItem>Find in Files...</MenubarItem>
          </MenubarSubContent>
        </MenubarSub>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</HStack>

With checkbox items

<HStack justify="center">
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>View</MenubarTrigger>
      <MenubarContent>
        <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>
        <MenubarCheckboxItem checked>Show Sidebar</MenubarCheckboxItem>
        <MenubarCheckboxItem>Show Status Bar</MenubarCheckboxItem>
        <MenubarSeparator />
        <MenubarCheckboxItem checked>Word Wrap</MenubarCheckboxItem>
        <MenubarCheckboxItem>Minimap</MenubarCheckboxItem>
      </MenubarContent>
    </MenubarMenu>
    <MenubarMenu>
      <MenubarTrigger>Window</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>Minimize</MenubarItem>
        <MenubarItem>Zoom</MenubarItem>
        <MenubarSeparator />
        <MenubarCheckboxItem>Always on Top</MenubarCheckboxItem>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</HStack>

With radio items

<HStack justify="center">
  <Menubar>
    <MenubarMenu>
      <MenubarTrigger>Preferences</MenubarTrigger>
      <MenubarContent>
        <MenubarLabel>Theme</MenubarLabel>
        <MenubarRadioGroup value="system">
          <MenubarRadioItem value="light">Light</MenubarRadioItem>
          <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
          <MenubarRadioItem value="system">System</MenubarRadioItem>
        </MenubarRadioGroup>
        <MenubarSeparator />
        <MenubarLabel>Font Size</MenubarLabel>
        <MenubarRadioGroup value="medium">
          <MenubarRadioItem value="small">Small</MenubarRadioItem>
          <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
          <MenubarRadioItem value="large">Large</MenubarRadioItem>
        </MenubarRadioGroup>
      </MenubarContent>
    </MenubarMenu>
  </Menubar>
</HStack>