Menubar

A desktop-style horizontal menu bar with dropdowns.

Installation

bash
npx shadcn@latest add menubar

Import

import {  Menubar, MenubarMenu, MenubarTrigger, MenubarContent,  MenubarItem, MenubarCheckboxItem, MenubarRadioGroup,  MenubarRadioItem, MenubarLabel, MenubarSeparator,  MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger,} from "@/components/ui/menubar"

Example

<Menubar>  <MenubarMenu>    <MenubarTrigger>File</MenubarTrigger>    <MenubarContent>      <MenubarItem>New Tab <MenubarShortcut>Cmd+T</MenubarShortcut></MenubarItem>      <MenubarItem>New Window <MenubarShortcut>Cmd+N</MenubarShortcut></MenubarItem>      <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>Shift+Cmd+Z</MenubarShortcut></MenubarItem>      <MenubarSeparator />      <MenubarSub>        <MenubarSubTrigger>Find</MenubarSubTrigger>        <MenubarSubContent>          <MenubarItem>Search the web</MenubarItem>          <MenubarItem>Find...</MenubarItem>        </MenubarSubContent>      </MenubarSub>    </MenubarContent>  </MenubarMenu>  <MenubarMenu>    <MenubarTrigger>View</MenubarTrigger>    <MenubarContent>      <MenubarCheckboxItem checked>Show Toolbar</MenubarCheckboxItem>      <MenubarCheckboxItem>Show Sidebar</MenubarCheckboxItem>      <MenubarSeparator />      <MenubarRadioGroup value="100%">        <MenubarRadioItem value="75%">75%</MenubarRadioItem>        <MenubarRadioItem value="100%">100%</MenubarRadioItem>        <MenubarRadioItem value="125%">125%</MenubarRadioItem>      </MenubarRadioGroup>    </MenubarContent>  </MenubarMenu></Menubar>