Menubar

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

export function MenubarDemo() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>File</MenubarTrigger>
				<MenubarContent>
					<MenubarGroup>
						<MenubarItem>
							New Tab <MenubarShortcut>⌘T</MenubarShortcut>
						</MenubarItem>
						<MenubarItem>
							New Window <MenubarShortcut>⌘N</MenubarShortcut>
						</MenubarItem>
						<MenubarItem disabled>New Incognito Window</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarSub>
							<MenubarSubTrigger>Share</MenubarSubTrigger>
							<MenubarSubContent>
								<MenubarGroup>
									<MenubarItem>Email link</MenubarItem>
									<MenubarItem>Messages</MenubarItem>
									<MenubarItem>Notes</MenubarItem>
								</MenubarGroup>
							</MenubarSubContent>
						</MenubarSub>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>
							Print... <MenubarShortcut>⌘P</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Edit</MenubarTrigger>
				<MenubarContent>
					<MenubarGroup>
						<MenubarItem>
							Undo <MenubarShortcut>⌘Z</MenubarShortcut>
						</MenubarItem>
						<MenubarItem>
							Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarSub>
							<MenubarSubTrigger>Find</MenubarSubTrigger>
							<MenubarSubContent>
								<MenubarGroup>
									<MenubarItem>Search the web</MenubarItem>
								</MenubarGroup>
								<MenubarSeparator />
								<MenubarGroup>
									<MenubarItem>Find...</MenubarItem>
									<MenubarItem>Find Next</MenubarItem>
									<MenubarItem>Find Previous</MenubarItem>
								</MenubarGroup>
							</MenubarSubContent>
						</MenubarSub>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>Cut</MenubarItem>
						<MenubarItem>Copy</MenubarItem>
						<MenubarItem>Paste</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>View</MenubarTrigger>
				<MenubarContent className="w-44">
					<MenubarGroup>
						<MenubarCheckboxItem>Bookmarks Bar</MenubarCheckboxItem>
						<MenubarCheckboxItem checked>Full URLs</MenubarCheckboxItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>
							Reload <MenubarShortcut>⌘R</MenubarShortcut>
						</MenubarItem>
						<MenubarItem disabled>
							Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>Toggle Fullscreen</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>Hide Sidebar</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Profiles</MenubarTrigger>
				<MenubarContent>
					<MenubarRadioGroup value="maged">
						<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
						<MenubarRadioItem value="maged">Maged</MenubarRadioItem>
						<MenubarRadioItem value="Luis">Luis</MenubarRadioItem>
					</MenubarRadioGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>Edit...</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>Add Profile...</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem variant="destructive">Delete User</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/menubar.json

Usage

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

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

Composition

Use the following composition to build a Menubar:

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarItem
│       │   └── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   ├── MenubarCheckboxItem
│       │   └── MenubarCheckboxItem
│       ├── MenubarSeparator
│       ├── MenubarGroup
│       │   ├── MenubarLabel
│       │   └── MenubarRadioGroup
│       │       ├── MenubarRadioItem
│       │       └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
│               └── MenubarGroup
│                   ├── MenubarLabel
│                   ├── MenubarItem
│                   └── MenubarItem
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent
        └── MenubarGroup
            ├── MenubarLabel
            ├── MenubarItem
            └── MenubarItem

Examples

Checkbox

Use MenubarCheckboxItem for toggleable options.

import {
	Menubar,
	MenubarCheckboxItem,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarSeparator,
	MenubarShortcut,
	MenubarTrigger,
} from "@/components/ui/menubar";

export function MenubarCheckbox() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>View</MenubarTrigger>
				<MenubarContent className="w-64">
					<MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
					<MenubarCheckboxItem checked>
						Always Show Full URLs
					</MenubarCheckboxItem>
					<MenubarSeparator />
					<MenubarItem>
						Reload <MenubarShortcut>⌘R</MenubarShortcut>
					</MenubarItem>
					<MenubarItem disabled>
						Force Reload <MenubarShortcut>⇧⌘R</MenubarShortcut>
					</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Format</MenubarTrigger>
				<MenubarContent>
					<MenubarCheckboxItem checked>Strikethrough</MenubarCheckboxItem>
					<MenubarCheckboxItem>Code</MenubarCheckboxItem>
					<MenubarCheckboxItem>Superscript</MenubarCheckboxItem>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

Radio

Use MenubarRadioGroup and MenubarRadioItem for single-select options.

"use client";

import * as React from "react";

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSeparator,
	MenubarTrigger,
} from "@/components/ui/menubar";

export function MenubarRadio() {
	const [user, setUser] = React.useState("maged");
	const [theme, setTheme] = React.useState("system");

	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>Profiles</MenubarTrigger>
				<MenubarContent>
					<MenubarRadioGroup value={user} onValueChange={setUser}>
						<MenubarRadioItem value="andy">Andy</MenubarRadioItem>
						<MenubarRadioItem value="maged">Maged</MenubarRadioItem>
						<MenubarRadioItem value="luis">Luis</MenubarRadioItem>
					</MenubarRadioGroup>
					<MenubarSeparator />
					<MenubarItem>Edit...</MenubarItem>
					<MenubarItem>Add Profile...</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>Theme</MenubarTrigger>
				<MenubarContent>
					<MenubarRadioGroup value={theme} onValueChange={setTheme}>
						<MenubarRadioItem value="light">Light</MenubarRadioItem>
						<MenubarRadioItem value="dark">Dark</MenubarRadioItem>
						<MenubarRadioItem value="system">System</MenubarRadioItem>
					</MenubarRadioGroup>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

Submenu

Use MenubarSub, MenubarSubTrigger, and MenubarSubContent for nested menus.

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

export function MenubarSubmenu() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>File</MenubarTrigger>
				<MenubarContent>
					<MenubarSub>
						<MenubarSubTrigger>Share</MenubarSubTrigger>
						<MenubarSubContent>
							<MenubarItem>Email link</MenubarItem>
							<MenubarItem>Messages</MenubarItem>
							<MenubarItem>Notes</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 />
					<MenubarSub>
						<MenubarSubTrigger>Find</MenubarSubTrigger>
						<MenubarSubContent>
							<MenubarItem>Find...</MenubarItem>
							<MenubarItem>Find Next</MenubarItem>
							<MenubarItem>Find Previous</MenubarItem>
						</MenubarSubContent>
					</MenubarSub>
					<MenubarSeparator />
					<MenubarItem>Cut</MenubarItem>
					<MenubarItem>Copy</MenubarItem>
					<MenubarItem>Paste</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

With Icons

Combine icons with labels for quick scanning.

import {
	FileIcon,
	FolderIcon,
	HelpCircleIcon,
	SaveIcon,
	SettingsIcon,
	TrashIcon,
} from "lucide-react";

import {
	Menubar,
	MenubarContent,
	MenubarGroup,
	MenubarItem,
	MenubarMenu,
	MenubarSeparator,
	MenubarShortcut,
	MenubarTrigger,
} from "@/components/ui/menubar";

export function MenubarIcons() {
	return (
		<Menubar>
			<MenubarMenu>
				<MenubarTrigger>File</MenubarTrigger>
				<MenubarContent>
					<MenubarItem>
						<FileIcon />
						New File <MenubarShortcut>⌘N</MenubarShortcut>
					</MenubarItem>
					<MenubarItem>
						<FolderIcon />
						Open Folder
					</MenubarItem>
					<MenubarSeparator />
					<MenubarItem>
						<SaveIcon />
						Save <MenubarShortcut>⌘S</MenubarShortcut>
					</MenubarItem>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>More</MenubarTrigger>
				<MenubarContent>
					<MenubarGroup>
						<MenubarItem>
							<SettingsIcon />
							Settings
						</MenubarItem>
						<MenubarItem>
							<HelpCircleIcon />
							Help
						</MenubarItem>
						<MenubarSeparator />
						<MenubarItem variant="destructive">
							<TrashIcon />
							Delete
						</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

Variants

Use the variant prop to change the background of the menubar.

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarSeparator,
	MenubarShortcut,
	MenubarTrigger,
} from "@/components/ui/menubar";

export function MenubarVariants() {
	return (
		<div className="flex w-full max-w-md flex-col gap-4">
			{(["default", "secondary", "tertiary", "outline"] as const).map(
				(variant, index) => (
					<Menubar key={`menubar-${index}`} variant={variant}>
						<MenubarMenu>
							<MenubarTrigger>File</MenubarTrigger>
							<MenubarContent>
								<MenubarItem>
									New Tab <MenubarShortcut>⌘T</MenubarShortcut>
								</MenubarItem>
								<MenubarItem>
									New Window <MenubarShortcut>⌘N</MenubarShortcut>
								</MenubarItem>
								<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>
							</MenubarContent>
						</MenubarMenu>
					</Menubar>
				),
			)}
		</div>
	);
}

In Surface

Place a Menubar inside a Surface for contextual menus.

Menubar inside a Surface

import {
	Menubar,
	MenubarContent,
	MenubarItem,
	MenubarMenu,
	MenubarSeparator,
	MenubarShortcut,
	MenubarTrigger,
} from "@/components/ui/menubar";
import { Surface } from "@/components/ui/surface";

export function MenubarInSurface() {
	return (
		<Surface className="flex w-full flex-col gap-3 rounded-3xl p-6">
			<p className="font-medium text-muted-foreground text-sm">
				Menubar inside a Surface
			</p>
			<Menubar variant="secondary">
				<MenubarMenu>
					<MenubarTrigger>File</MenubarTrigger>
					<MenubarContent>
						<MenubarItem>
							New Tab <MenubarShortcut>⌘T</MenubarShortcut>
						</MenubarItem>
						<MenubarItem>
							New Window <MenubarShortcut>⌘N</MenubarShortcut>
						</MenubarItem>
						<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>
					</MenubarContent>
				</MenubarMenu>
			</Menubar>
		</Surface>
	);
}

RTL

"use client";

import * as React from "react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	Menubar,
	MenubarCheckboxItem,
	MenubarContent,
	MenubarGroup,
	MenubarItem,
	MenubarMenu,
	MenubarRadioGroup,
	MenubarRadioItem,
	MenubarSeparator,
	MenubarShortcut,
	MenubarSub,
	MenubarSubContent,
	MenubarSubTrigger,
	MenubarTrigger,
} from "@/components/ui/menubar";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			file: "File",
			newTab: "New Tab",
			newWindow: "New Window",
			newIncognitoWindow: "New Incognito Window",
			share: "Share",
			emailLink: "Email link",
			messages: "Messages",
			notes: "Notes",
			print: "Print...",
			edit: "Edit",
			undo: "Undo",
			redo: "Redo",
			find: "Find",
			searchTheWeb: "Search the web",
			findItem: "Find...",
			findNext: "Find Next",
			findPrevious: "Find Previous",
			cut: "Cut",
			copy: "Copy",
			paste: "Paste",
			view: "View",
			bookmarksBar: "Bookmarks Bar",
			fullUrls: "Full URLs",
			reload: "Reload",
			forceReload: "Force Reload",
			toggleFullscreen: "Toggle Fullscreen",
			hideSidebar: "Hide Sidebar",
			profiles: "Profiles",
			andy: "Andy",
			maged: "Maged",
			luis: "Luis",
			editProfile: "Edit...",
			addProfile: "Add Profile...",
			deleteUser: "Delete User",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			file: "ملف",
			newTab: "علامة تبويب جديدة",
			newWindow: "نافذة جديدة",
			newIncognitoWindow: "نافذة التصفح المتخفي الجديدة",
			share: "مشاركة",
			emailLink: "رابط البريد الإلكتروني",
			messages: "الرسائل",
			notes: "الملاحظات",
			print: "طباعة...",
			edit: "تعديل",
			undo: "تراجع",
			redo: "إعادة",
			find: "بحث",
			searchTheWeb: "البحث على الويب",
			findItem: "بحث...",
			findNext: "البحث التالي",
			findPrevious: "البحث السابق",
			cut: "قص",
			copy: "نسخ",
			paste: "لصق",
			view: "عرض",
			bookmarksBar: "شريط الإشارات المرجعية",
			fullUrls: "عناوين URL الكاملة",
			reload: "إعادة تحميل",
			forceReload: "إعادة تحميل قسري",
			toggleFullscreen: "تبديل وضع ملء الشاشة",
			hideSidebar: "إخفاء الشريط الجانبي",
			profiles: "الملفات الشخصية",
			andy: "آندي",
			maged: "ماجد",
			luis: "لويس",
			editProfile: "تعديل...",
			addProfile: "إضافة ملف شخصي...",
			deleteUser: "حذف المستخدم",
		},
	},
	he: {
		dir: "rtl",
		values: {
			file: "קובץ",
			newTab: "כרטיסייה חדשה",
			newWindow: "חלון חדש",
			newIncognitoWindow: "חלון גלישה בסתר חדש",
			share: "שתף",
			emailLink: "קישור אימייל",
			messages: "הודעות",
			notes: "הערות",
			print: "הדפס...",
			edit: "ערוך",
			undo: "בטל",
			redo: "בצע שוב",
			find: "מצא",
			searchTheWeb: "חפש באינטרנט",
			findItem: "מצא...",
			findNext: "מצא הבא",
			findPrevious: "מצא הקודם",
			cut: "גזור",
			copy: "העתק",
			paste: "הדבק",
			view: "תצוגה",
			bookmarksBar: "סרגל סימניות",
			fullUrls: "כתובות URL מלאות",
			reload: "רענן",
			forceReload: "רענן בכוח",
			toggleFullscreen: "החלף מסך מלא",
			hideSidebar: "הסתר סרגל צד",
			profiles: "פרופילים",
			andy: "Andy",
			maged: "Maged",
			luis: "Luis",
			editProfile: "ערוך...",
			addProfile: "הוסף פרופיל...",
			deleteUser: "מחק משתמש",
		},
	},
};

export function MenubarRtl() {
	const { dir, t, language } = useTranslation(translations, "ar");
	const [profile, setProfile] = React.useState("maged");

	return (
		<Menubar dir={dir}>
			<MenubarMenu>
				<MenubarTrigger>{t.file}</MenubarTrigger>
				<MenubarContent dir={dir} align={dir === "rtl" ? "end" : "start"}>
					<MenubarGroup>
						<MenubarItem>
							{t.newTab} <MenubarShortcut>⌘T</MenubarShortcut>
						</MenubarItem>
						<MenubarItem>
							{t.newWindow} <MenubarShortcut>⌘N</MenubarShortcut>
						</MenubarItem>
						<MenubarItem disabled>{t.newIncognitoWindow}</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarSub>
							<MenubarSubTrigger>{t.share}</MenubarSubTrigger>
							<MenubarSubContent
								dir={dir}
								data-lang={dir === "rtl" ? language : undefined}
							>
								<MenubarGroup>
									<MenubarItem>{t.emailLink}</MenubarItem>
									<MenubarItem>{t.messages}</MenubarItem>
									<MenubarItem>{t.notes}</MenubarItem>
								</MenubarGroup>
							</MenubarSubContent>
						</MenubarSub>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>
							{t.print} <MenubarShortcut>⌘P</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>{t.edit}</MenubarTrigger>
				<MenubarContent
					dir={dir}
					align={dir === "rtl" ? "end" : "start"}
					data-lang={dir === "rtl" ? language : undefined}
				>
					<MenubarGroup>
						<MenubarItem>
							{t.undo} <MenubarShortcut>⌘Z</MenubarShortcut>
						</MenubarItem>
						<MenubarItem>
							{t.redo} <MenubarShortcut>⇧⌘Z</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarSub>
							<MenubarSubTrigger>{t.find}</MenubarSubTrigger>
							<MenubarSubContent
								dir={dir}
								data-lang={dir === "rtl" ? language : undefined}
							>
								<MenubarGroup>
									<MenubarItem>{t.searchTheWeb}</MenubarItem>
								</MenubarGroup>
								<MenubarSeparator />
								<MenubarGroup>
									<MenubarItem>{t.findItem}</MenubarItem>
									<MenubarItem>{t.findNext}</MenubarItem>
									<MenubarItem>{t.findPrevious}</MenubarItem>
								</MenubarGroup>
							</MenubarSubContent>
						</MenubarSub>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>{t.cut}</MenubarItem>
						<MenubarItem>{t.copy}</MenubarItem>
						<MenubarItem>{t.paste}</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>{t.view}</MenubarTrigger>
				<MenubarContent
					className="w-44"
					dir={dir}
					align={dir === "rtl" ? "end" : "start"}
					data-lang={dir === "rtl" ? language : undefined}
				>
					<MenubarGroup>
						<MenubarCheckboxItem>{t.bookmarksBar}</MenubarCheckboxItem>
						<MenubarCheckboxItem checked>{t.fullUrls}</MenubarCheckboxItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>
							{t.reload} <MenubarShortcut>⌘R</MenubarShortcut>
						</MenubarItem>
						<MenubarItem disabled>
							{t.forceReload} <MenubarShortcut>⇧⌘R</MenubarShortcut>
						</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>{t.toggleFullscreen}</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>{t.hideSidebar}</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
			<MenubarMenu>
				<MenubarTrigger>{t.profiles}</MenubarTrigger>
				<MenubarContent
					dir={dir}
					align={dir === "rtl" ? "end" : "start"}
					data-lang={dir === "rtl" ? language : undefined}
				>
					<MenubarRadioGroup value={profile} onValueChange={setProfile}>
						<MenubarRadioItem value="andy">{t.andy}</MenubarRadioItem>
						<MenubarRadioItem value="maged">{t.maged}</MenubarRadioItem>
						<MenubarRadioItem value="Luis">{t.luis}</MenubarRadioItem>
					</MenubarRadioGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>{t.editProfile}</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem>{t.addProfile}</MenubarItem>
					</MenubarGroup>
					<MenubarSeparator />
					<MenubarGroup>
						<MenubarItem variant="destructive">{t.deleteUser}</MenubarItem>
					</MenubarGroup>
				</MenubarContent>
			</MenubarMenu>
		</Menubar>
	);
}

API Reference

See the Base UI Menubar documentation.