Menubar
A horizontal bar of menus, like a desktop app's File and Edit menus, for editors and tools with many commands.
npx prodular-ui add menubarDocument editor
Open one menu, then move across with the arrow keys or by hovering.
"use client"
import * as React from "react"
import { Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger,} from "@/components/ui/menubar"
export default function MenubarEditor() { const [outline, setOutline] = React.useState(true) const [comments, setComments] = React.useState(true) const [width, setWidth] = React.useState("comfortable") return ( <Menubar> <MenubarMenu> <MenubarTrigger>File</MenubarTrigger> <MenubarContent> <MenubarItem> New document <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem> <MenubarItem> Open <MenubarShortcut>⌘O</MenubarShortcut> </MenubarItem> <MenubarSub> <MenubarSubTrigger>Export as</MenubarSubTrigger> <MenubarSubContent> <MenubarItem>PDF</MenubarItem> <MenubarItem>Markdown</MenubarItem> <MenubarItem>Word document</MenubarItem> </MenubarSubContent> </MenubarSub> <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> Find and replace <MenubarShortcut>⌘F</MenubarShortcut> </MenubarItem> <MenubarSeparator /> <MenubarItem variant="destructive">Clear formatting</MenubarItem> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>View</MenubarTrigger> <MenubarContent> <MenubarCheckboxItem checked={outline} onCheckedChange={setOutline}> Document outline </MenubarCheckboxItem> <MenubarCheckboxItem checked={comments} onCheckedChange={setComments}> Comments </MenubarCheckboxItem> <MenubarSeparator /> <MenubarGroup> <MenubarLabel>Page width</MenubarLabel> <MenubarRadioGroup value={width} onValueChange={setWidth}> <MenubarRadioItem value="narrow">Narrow</MenubarRadioItem> <MenubarRadioItem value="comfortable">Comfortable</MenubarRadioItem> <MenubarRadioItem value="full">Full width</MenubarRadioItem> </MenubarRadioGroup> </MenubarGroup> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>Help</MenubarTrigger> <MenubarContent> <MenubarItem>Keyboard shortcuts</MenubarItem> <MenubarItem>What's new</MenubarItem> <MenubarItem>Contact support</MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> )}With icons
import { ArchiveIcon, CopyIcon, LinkIcon, PlusIcon, RefreshCwIcon, Trash2Icon,} from "lucide-react"
import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger,} from "@/components/ui/menubar"
export default function MenubarIcons() { return ( <Menubar> <MenubarMenu> <MenubarTrigger>Issue</MenubarTrigger> <MenubarContent> <MenubarItem> <PlusIcon /> New issue <MenubarShortcut>C</MenubarShortcut> </MenubarItem> <MenubarItem> <CopyIcon /> Duplicate </MenubarItem> <MenubarItem> <LinkIcon /> Copy link <MenubarShortcut>⌘L</MenubarShortcut> </MenubarItem> <MenubarSeparator /> <MenubarItem> <ArchiveIcon /> Archive </MenubarItem> <MenubarItem variant="destructive"> <Trash2Icon /> Delete issue </MenubarItem> </MenubarContent> </MenubarMenu> <MenubarMenu> <MenubarTrigger>Sync</MenubarTrigger> <MenubarContent> <MenubarItem> <RefreshCwIcon /> Sync with GitHub </MenubarItem> <MenubarItem disabled> <RefreshCwIcon /> Sync with Jira </MenubarItem> </MenubarContent> </MenubarMenu> </Menubar> )}Anatomy
<Menubar> <MenubarMenu> <MenubarTrigger>File</MenubarTrigger> <MenubarContent> <MenubarItem> New document <MenubarShortcut>⌘N</MenubarShortcut> </MenubarItem> </MenubarContent> </MenubarMenu></Menubar>Guidance
Use it when
- Use in document editors, design tools and admin consoles where people expect desktop style menus.
- Keep top level labels to one word: File, Edit, View, Help.
Avoid
- Website navigation. Use Navigation menu.
- Fewer than three menus. Use one or two Dropdown menus instead.
Rules for AI agents
Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.
- Each MenubarMenu needs exactly one MenubarTrigger and one MenubarContent.
- Items, shortcuts, separators, checkbox and radio items behave and look exactly like Dropdown menu. Follow the same rules.
- Show the platform shortcut with MenubarShortcut. Use the symbols ⌘ ⇧ ⌥ on macOS.
- Put MenubarLabel inside a MenubarGroup.
- Use variant="inline" inside a toolbar or command bar instead of overriding the border, background and padding with className.
API
MenubarContent
| Prop | Type | Default | Description |
|---|---|---|---|
| align | "start" | "center" | "end" | "start" | Alignment against the trigger. |
MenubarItem
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | Same as DropdownMenuItem. |
Menubar
| Prop | Type | Default | Description |
|---|---|---|---|
| loopFocus | boolean | true | Arrow keys wrap from the last menu to the first. |
| variant | "default" | "inline" | "default" | inline drops the card surface, for a menubar inside a toolbar or command bar. |
Installation
The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.
npx prodular-ui add menubar# or, with the registry in components.jsonnpx shadcn@latest add @prodular/menubar