Menubar
Displays a top-level bar with expandable menus for easy access.
menubar-demo.tsx
import {
Menubar,
MenubarContent,
MenubarItem,
MenubarMenu,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar"
export function MenubarDemo() {
return (
<Menubar>
<MenubarMenu>
<MenubarTrigger>File</MenubarTrigger>
<MenubarContent>
<MenubarItem>
New File
<MenubarShortcut>⌘N</MenubarShortcut>
</MenubarItem>
<MenubarItem>
New Window
<MenubarShortcut>⇧⌘N</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Open
<MenubarShortcut>⌘O</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Open Folder
<MenubarShortcut>⇧⌘O</MenubarShortcut>
</MenubarItem>
<MenubarItem>Open Recent</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Save
<MenubarShortcut>⌘S</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Save As
<MenubarShortcut>⇧⌘S</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Close Window
<MenubarShortcut>⌘W</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Edit</MenubarTrigger>
<MenubarContent>
<MenubarItem>
Undo
<MenubarShortcut>⌘Z</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Redo
<MenubarShortcut>⌘Y</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Cut
<MenubarShortcut>⌘X</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Copy
<MenubarShortcut>⌘C</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Paste
<MenubarShortcut>⌘V</MenubarShortcut>
</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Find
<MenubarShortcut>⌘F</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Replace
<MenubarShortcut>⌥⌘F</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>View</MenubarTrigger>
<MenubarContent>
<MenubarSub>
<MenubarSubTrigger>Appearance</MenubarSubTrigger>
<MenubarSubContent>
<MenubarRadioGroup
onValueChange={(value) => {
console.log(value)
}}
>
<MenubarRadioItem value="system">System</MenubarRadioItem>
<MenubarRadioItem value="light">Light</MenubarRadioItem>
<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
</MenubarRadioGroup>
</MenubarSubContent>
</MenubarSub>
<MenubarSeparator />
<MenubarItem>
Show/Hide Sidebar
<MenubarShortcut>⌃⌥⌘*</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Command Palette
<MenubarShortcut>⇧⌘P</MenubarShortcut>
</MenubarItem>
<MenubarItem>Expand Tabs</MenubarItem>
<MenubarSeparator />
<MenubarItem>
Zoom In
<MenubarShortcut>⌘+</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Zoom Out
<MenubarShortcut>⌘-</MenubarShortcut>
</MenubarItem>
<MenubarItem>
Reset Zoom
<MenubarShortcut>⌘0</MenubarShortcut>
</MenubarItem>
</MenubarContent>
</MenubarMenu>
<MenubarMenu>
<MenubarTrigger>Help</MenubarTrigger>
<MenubarContent>
<MenubarItem>Getting Started</MenubarItem>
<MenubarItem>Report Issue</MenubarItem>
<MenubarItem>Check for Updates</MenubarItem>
<MenubarItem>Contact the Team</MenubarItem>
</MenubarContent>
</MenubarMenu>
</Menubar>
)
}
Installation
npx shadcn@latest add https://9ui.dev/r/menubar.json
Usage
Imports
import {
Menubar,
MenubarCheckboxItem,
MenubarContent,
MenubarGroup,
MenubarItem,
MenubarLabel,
MenubarMenu,
MenubarPortal,
MenubarRadioGroup,
MenubarRadioItem,
MenubarSeparator,
MenubarShortcut,
MenubarSub,
MenubarSubContent,
MenubarSubTrigger,
MenubarTrigger,
} from "@/components/ui/menubar"
Anatomy
<Menubar>
<MenubarMenu>
<MenubarTrigger />
<MenubarContent>
<MenubarItem>
<MenubarShortcut />
</MenubarItem>
<MenubarSeparator />
<MenubarCheckboxItem />
<MenubarSub>
<MenubarSubTrigger />
<MenubarSubContent>{/* ... */}</MenubarSubContent>
</MenubarSub>
<MenubarRadioGroup>
<MenubarRadioItem />
</MenubarRadioGroup>
</MenubarContent>
</MenubarMenu>
</Menubar>