Menubar

Creates a list of items that can be triggered by the user to perform an action or navigate.

Source Code Radix UI

Installation


pnpm dlx radianui@latest add menubar

Usage

Imports

components/ui/menubar.tsx

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

Code

components/ui/menubar.tsx

<Menubar>
	<MenubarMenu>
		<MenubarTrigger>File</MenubarTrigger>
		<MenubarContent>
			<MenubarGroup>
				<MenubarItem>
					New Tab <MenubarShortcut>⌘T</MenubarShortcut>
				</MenubarItem>
				<MenubarItem>
					New Window <MenubarShortcut>⌘N</MenubarShortcut>
				</MenubarItem>
			</MenubarGroup>
			<MenubarSeparator />
			<MenubarGroup>
				<MenubarItem>
					Print... <MenubarShortcut>⌘P</MenubarShortcut>
				</MenubarItem>
			</MenubarGroup>
		</MenubarContent>
	</MenubarMenu>
</Menubar>

Examples

Text Editor

A real-world text editor menubar with File, Edit, and View menus including keyboard shortcuts and toggleable checkbox items.

With Radio Groups

Use MenubarRadioGroup and MenubarRadioItem to present mutually exclusive options like theme or language selection.

With Destructive Actions

Use variant="destructive" on MenubarItem for dangerous operations like log out or delete.

Props

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
align	start	startcenterend
alignOffset	-4	number
sideOffset	8	number
External Reference	-	-

Name	Default	Values
inset	false	boolean
variant	default	defaultdestructive
External Reference	-	-

Name	Default	Values
checked	false	boolean
onCheckedChange	-	(checked: boolean) => void
inset	false	boolean
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
value*	-	string
inset	false	boolean
External Reference	-	-

Name	Default	Values
inset	false	boolean
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
inset	false	boolean
External Reference	-	-

Name	Default	Values
External Reference	-	-

Name	Default	Values
className	-	string