Menubar

Displays a top-level bar with expandable menus for easy access.

menubar-demo.tsx
import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarItemShortcut,
	MenubarMenu,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSeparator,
	MenubarSubMenu,
	MenubarSubTrigger,
	MenubarTrigger,
} from "@/components/ui/menubar"
 
export function MenubarDemo() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>File</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>
						New File
						<MenubarItemShortcut>⌘N</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						New Window
						<MenubarItemShortcut>⇧⌘N</MenubarItemShortcut>
					</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Open
						<MenubarItemShortcut>⌘O</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Open Folder
						<MenubarItemShortcut>⇧⌘O</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>Open Recent</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Save
						<MenubarItemShortcut>⌘S</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Save As
						<MenubarItemShortcut>⇧⌘S</MenubarItemShortcut>
					</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Close Window
						<MenubarItemShortcut>⌘W</MenubarItemShortcut>
					</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Edit</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>
						Undo
						<MenubarItemShortcut>⌘Z</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Redo
						<MenubarItemShortcut>⌘Y</MenubarItemShortcut>
					</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Cut
						<MenubarItemShortcut>⌘X</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Copy
						<MenubarItemShortcut>⌘C</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Paste
						<MenubarItemShortcut>⌘V</MenubarItemShortcut>
					</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Find
						<MenubarItemShortcut>⌘F</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Replace
						<MenubarItemShortcut>⌥⌘F</MenubarItemShortcut>
					</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>View</MenubarTrigger>
				<MenubarContent>
					<MenubarSubMenu>
						<MenubarSubTrigger>Appearance</MenubarSubTrigger>
						<MenubarContent>
							<MenubarRadioGroup>
								<MenubarRadioItem value="system">System</MenubarRadioItem>
								<MenubarRadioItem value="light">Light</MenubarRadioItem>
								<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
							</MenubarRadioGroup>
						</MenubarContent>
					</MenubarSubMenu>
					<MenubarSeparator />
					<MenubarItem>
						Show/Hide Sidebar
						<MenubarItemShortcut>⌃⌥⌘*</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Command Palette
						<MenubarItemShortcut>⇧⌘P</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>Expand Tabs</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						Zoom In
						<MenubarItemShortcut>⌘+</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Zoom Out
						<MenubarItemShortcut>⌘-</MenubarItemShortcut>
					</MenubarItem>
					<MenubarItem>
						Reset Zoom
						<MenubarItemShortcut>⌘0</MenubarItemShortcut>
					</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

Usage

Imports
import {
	Menubar,
	MenubarCheckboxItem,
	MenubarContent,
	MenubarItem,
	MenubarItemShortcut,
	MenubarMenu,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSeparator,
	MenubarSubMenu,
	MenubarSubTrigger,
	MenubarTrigger,
} from "@/components/ui/menubar"
Anatomy
<Menubar>
	<MenubarMenu>
		<MenubarTrigger />
		<MenubarContent>
			<MenubarItem>
				<MenubarItemShortcut />
			</MenubarItem>
			<MenubarSeparator />
			<MenubarCheckboxItem />
			<MenubarSubMenu>
				<MenubarSubTrigger />
				<MenubarContent>
					<MenubarRadioGroup>
						<MenubarRadioItem />
					</MenubarRadioGroup>
				</MenubarContent>
			</MenubarSubMenu>
		</MenubarContent>
	</MenubarMenu>
</Menubar>