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 @herocn/menubar

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.