Github

Context Menu

PreviousNext

Displays a menu of actions triggered by a right click.

"use client";

import * as React from "react";
import {
	ContextMenu,
	ContextMenuCheckboxItem,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuLabel,
	ContextMenuRadioGroup,
	ContextMenuRadioItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuDemo() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent className="w-48">
				<ContextMenuGroup>
					<ContextMenuItem>
						Back
						<ContextMenuShortcut>⌘[</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem disabled>
						Forward
						<ContextMenuShortcut>⌘]</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Reload
						<ContextMenuShortcut>⌘R</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuSub>
						<ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
						<ContextMenuSubContent className="w-44">
							<ContextMenuGroup>
								<ContextMenuItem>Save Page...</ContextMenuItem>
								<ContextMenuItem>Create Shortcut...</ContextMenuItem>
								<ContextMenuItem>Name Window...</ContextMenuItem>
							</ContextMenuGroup>
							<ContextMenuSeparator />
							<ContextMenuGroup>
								<ContextMenuItem>Developer Tools</ContextMenuItem>
							</ContextMenuGroup>
							<ContextMenuSeparator />
							<ContextMenuGroup>
								<ContextMenuItem variant="destructive">Delete</ContextMenuItem>
							</ContextMenuGroup>
						</ContextMenuSubContent>
					</ContextMenuSub>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuCheckboxItem checked>
						Show Bookmarks
					</ContextMenuCheckboxItem>
					<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuRadioGroup value="pedro">
						<ContextMenuLabel>People</ContextMenuLabel>
						<ContextMenuRadioItem value="pedro">
							Pedro Duarte
						</ContextMenuRadioItem>
						<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
					</ContextMenuRadioGroup>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Installation

pnpm dlx shadcn@latest add https://herocn.dev/r/context-menu.json

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/context-menu"
<ContextMenu>
  <ContextMenuTrigger>Right click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Profile</ContextMenuItem>
    <ContextMenuItem>Billing</ContextMenuItem>
    <ContextMenuItem>Team</ContextMenuItem>
    <ContextMenuItem>Subscription</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Composition

Use the following composition to build a ContextMenu:

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuItem
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   ├── ContextMenuCheckboxItem
    │   └── ContextMenuCheckboxItem
    ├── ContextMenuSeparator
    ├── ContextMenuGroup
    │   ├── ContextMenuLabel
    │   └── ContextMenuRadioGroup
    │       ├── ContextMenuRadioItem
    │       └── ContextMenuRadioItem
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent
            └── ContextMenuGroup
                ├── ContextMenuItem
                └── ContextMenuItem

Examples

Basic

A simple context menu with a few actions.

"use client";

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuBasic() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuItem>Back</ContextMenuItem>
					<ContextMenuItem disabled>Forward</ContextMenuItem>
					<ContextMenuItem>Reload</ContextMenuItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Use ContextMenuSub to nest secondary actions.

"use client";

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuSubmenu() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuItem>
						Copy
						<ContextMenuShortcut>⌘C</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Cut
						<ContextMenuShortcut>⌘X</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSub>
					<ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
					<ContextMenuSubContent>
						<ContextMenuGroup>
							<ContextMenuItem>Save Page...</ContextMenuItem>
							<ContextMenuItem>Create Shortcut...</ContextMenuItem>
							<ContextMenuItem>Name Window...</ContextMenuItem>
						</ContextMenuGroup>
						<ContextMenuSeparator />
						<ContextMenuGroup>
							<ContextMenuItem>Developer Tools</ContextMenuItem>
						</ContextMenuGroup>
						<ContextMenuSeparator />
						<ContextMenuGroup>
							<ContextMenuItem variant="destructive">Delete</ContextMenuItem>
						</ContextMenuGroup>
					</ContextMenuSubContent>
				</ContextMenuSub>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Shortcuts

Add ContextMenuShortcut to show keyboard hints.

"use client";

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuShortcuts() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuItem>
						Back
						<ContextMenuShortcut>⌘[</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem disabled>
						Forward
						<ContextMenuShortcut>⌘]</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Reload
						<ContextMenuShortcut>⌘R</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuItem>
						Save
						<ContextMenuShortcut>⌘S</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Save As...
						<ContextMenuShortcut>⇧⌘S</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Groups

Group related actions and separate them with dividers.

"use client";

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuLabel,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuGroups() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuLabel>File</ContextMenuLabel>
					<ContextMenuItem>
						New File
						<ContextMenuShortcut>⌘N</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Open File
						<ContextMenuShortcut>⌘O</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Save
						<ContextMenuShortcut>⌘S</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuLabel>Edit</ContextMenuLabel>
					<ContextMenuItem>
						Undo
						<ContextMenuShortcut>⌘Z</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Redo
						<ContextMenuShortcut>⇧⌘Z</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuItem>
						Cut
						<ContextMenuShortcut>⌘X</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Copy
						<ContextMenuShortcut>⌘C</ContextMenuShortcut>
					</ContextMenuItem>
					<ContextMenuItem>
						Paste
						<ContextMenuShortcut>⌘V</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuItem variant="destructive">
						Delete
						<ContextMenuShortcut>⌫</ContextMenuShortcut>
					</ContextMenuItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Icons

Combine icons with labels for quick scanning.

"use client";

import {
	ClipboardPasteIcon,
	CopyIcon,
	ScissorsIcon,
	TrashIcon,
} from "lucide-react";
import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuIcons() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuItem>
						<CopyIcon />
						Copy
					</ContextMenuItem>
					<ContextMenuItem>
						<ScissorsIcon />
						Cut
					</ContextMenuItem>
					<ContextMenuItem>
						<ClipboardPasteIcon />
						Paste
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuItem variant="destructive">
						<TrashIcon />
						Delete
					</ContextMenuItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Checkboxes

Use ContextMenuCheckboxItem for toggles.

"use client";

import {
	ContextMenu,
	ContextMenuCheckboxItem,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuCheckboxes() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuCheckboxItem defaultChecked>
						Show Bookmarks Bar
					</ContextMenuCheckboxItem>
					<ContextMenuCheckboxItem>Show Full URLs</ContextMenuCheckboxItem>
					<ContextMenuCheckboxItem defaultChecked>
						Show Developer Tools
					</ContextMenuCheckboxItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Radio

Use ContextMenuRadioItem for exclusive choices.

"use client";

import * as React from "react";
import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuLabel,
	ContextMenuRadioGroup,
	ContextMenuRadioItem,
	ContextMenuSeparator,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuRadio() {
	const [user, setUser] = React.useState("pedro");
	const [theme, setTheme] = React.useState("light");

	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuLabel>People</ContextMenuLabel>
					<ContextMenuRadioGroup value={user} onValueChange={setUser}>
						<ContextMenuRadioItem value="pedro">
							Pedro Duarte
						</ContextMenuRadioItem>
						<ContextMenuRadioItem value="colm">Colm Tuite</ContextMenuRadioItem>
					</ContextMenuRadioGroup>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuLabel>Theme</ContextMenuLabel>
					<ContextMenuRadioGroup value={theme} onValueChange={setTheme}>
						<ContextMenuRadioItem value="light">Light</ContextMenuRadioItem>
						<ContextMenuRadioItem value="dark">Dark</ContextMenuRadioItem>
						<ContextMenuRadioItem value="system">System</ContextMenuRadioItem>
					</ContextMenuRadioGroup>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Destructive

Use variant="destructive" to style the menu item as destructive.

"use client";

import { ArchiveIcon, PencilIcon, ShareIcon, TrashIcon } from "lucide-react";
import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuSeparator,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuDestructive() {
	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">
					Right click here
				</span>
				<span className="pointer-coarse:inline-block hidden">
					Long press here
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent>
				<ContextMenuGroup>
					<ContextMenuItem>
						<PencilIcon />
						Edit
					</ContextMenuItem>
					<ContextMenuItem>
						<ShareIcon />
						Share
					</ContextMenuItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuItem variant="destructive">
						<TrashIcon />
						Delete
					</ContextMenuItem>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

Sides

Control submenu placement with side and align props.

"use client";

import {
	ContextMenu,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

export function ContextMenuSides() {
	return (
		<div className="grid w-full max-w-sm grid-cols-2 gap-4">
			<ContextMenu>
				<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
					<span className="pointer-fine:inline-block hidden">
						Right click (top)
					</span>
					<span className="pointer-coarse:inline-block hidden">
						Long press (top)
					</span>
				</ContextMenuTrigger>
				<ContextMenuContent side="top">
					<ContextMenuGroup>
						<ContextMenuItem>Back</ContextMenuItem>
						<ContextMenuItem>Forward</ContextMenuItem>
						<ContextMenuItem>Reload</ContextMenuItem>
					</ContextMenuGroup>
				</ContextMenuContent>
			</ContextMenu>
			<ContextMenu>
				<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
					<span className="pointer-fine:inline-block hidden">
						Right click (right)
					</span>
					<span className="pointer-coarse:inline-block hidden">
						Long press (right)
					</span>
				</ContextMenuTrigger>
				<ContextMenuContent side="right">
					<ContextMenuGroup>
						<ContextMenuItem>Back</ContextMenuItem>
						<ContextMenuItem>Forward</ContextMenuItem>
						<ContextMenuItem>Reload</ContextMenuItem>
					</ContextMenuGroup>
				</ContextMenuContent>
			</ContextMenu>
			<ContextMenu>
				<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
					<span className="pointer-fine:inline-block hidden">
						Right click (bottom)
					</span>
					<span className="pointer-coarse:inline-block hidden">
						Long press (bottom)
					</span>
				</ContextMenuTrigger>
				<ContextMenuContent side="bottom">
					<ContextMenuGroup>
						<ContextMenuItem>Back</ContextMenuItem>
						<ContextMenuItem>Forward</ContextMenuItem>
						<ContextMenuItem>Reload</ContextMenuItem>
					</ContextMenuGroup>
				</ContextMenuContent>
			</ContextMenu>
			<ContextMenu>
				<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
					<span className="pointer-fine:inline-block hidden">
						Right click (left)
					</span>
					<span className="pointer-coarse:inline-block hidden">
						Long press (left)
					</span>
				</ContextMenuTrigger>
				<ContextMenuContent side="left">
					<ContextMenuGroup>
						<ContextMenuItem>Back</ContextMenuItem>
						<ContextMenuItem>Forward</ContextMenuItem>
						<ContextMenuItem>Reload</ContextMenuItem>
					</ContextMenuGroup>
				</ContextMenuContent>
			</ContextMenu>
		</div>
	);
}

RTL

"use client";

import { ArrowLeftIcon, ArrowRightIcon, RotateCwIcon } from "lucide-react";
import * as React from "react";

import {
	type Translations,
	useTranslation,
} from "@/components/language-selector";
import {
	ContextMenu,
	ContextMenuCheckboxItem,
	ContextMenuContent,
	ContextMenuGroup,
	ContextMenuItem,
	ContextMenuLabel,
	ContextMenuRadioGroup,
	ContextMenuRadioItem,
	ContextMenuSeparator,
	ContextMenuShortcut,
	ContextMenuSub,
	ContextMenuSubContent,
	ContextMenuSubTrigger,
	ContextMenuTrigger,
} from "@/components/ui/context-menu";

const translations: Translations = {
	en: {
		dir: "ltr",
		values: {
			rightClick: "Right click here",
			longPress: "Long press here",
			navigation: "Navigation",
			back: "Back",
			forward: "Forward",
			reload: "Reload",
			moreTools: "More Tools",
			savePage: "Save Page...",
			createShortcut: "Create Shortcut...",
			nameWindow: "Name Window...",
			developerTools: "Developer Tools",
			delete: "Delete",
			showBookmarks: "Show Bookmarks",
			showFullUrls: "Show Full URLs",
			people: "People",
			pedro: "Pedro Duarte",
			colm: "Colm Tuite",
		},
	},
	ar: {
		dir: "rtl",
		values: {
			rightClick: "انقر بزر الماوس الأيمن هنا",
			longPress: "اضغط مطولاً هنا",
			navigation: "التنقل",
			back: "رجوع",
			forward: "تقدم",
			reload: "إعادة تحميل",
			moreTools: "المزيد من الأدوات",
			savePage: "حفظ الصفحة...",
			createShortcut: "إنشاء اختصار...",
			nameWindow: "تسمية النافذة...",
			developerTools: "أدوات المطور",
			delete: "حذف",
			showBookmarks: "إظهار الإشارات المرجعية",
			showFullUrls: "إظهار عناوين URL الكاملة",
			people: "الأشخاص",
			pedro: "بيدرو دوارتي",
			colm: "كولم تويت",
		},
	},
	he: {
		dir: "rtl",
		values: {
			rightClick: "לחץ לחיצה ימנית כאן",
			longPress: "לחץ לחיצה ארוכה כאן",
			navigation: "ניווט",
			back: "חזור",
			forward: "קדימה",
			reload: "רענן",
			moreTools: "כלים נוספים",
			savePage: "שמור עמוד...",
			createShortcut: "צור קיצור דרך...",
			nameWindow: "שם חלון...",
			developerTools: "כלי מפתח",
			delete: "מחק",
			showBookmarks: "הצג סימניות",
			showFullUrls: "הצג כתובות URL מלאות",
			people: "אנשים",
			pedro: "פדרו דוארטה",
			colm: "קולם טויט",
		},
	},
};

export function ContextMenuRtl() {
	const { dir, language, t } = useTranslation(translations, "ar");
	const [people, setPeople] = React.useState("pedro");

	return (
		<ContextMenu>
			<ContextMenuTrigger className="flex aspect-video w-full max-w-xs items-center justify-center rounded-xl border border-dashed text-sm">
				<span className="pointer-fine:inline-block hidden">{t.rightClick}</span>
				<span className="pointer-coarse:inline-block hidden">
					{t.longPress}
				</span>
			</ContextMenuTrigger>
			<ContextMenuContent
				className="w-48"
				dir={dir}
				data-lang={dir === "rtl" ? language : undefined}
			>
				<ContextMenuGroup>
					<ContextMenuSub>
						<ContextMenuSubTrigger>{t.navigation}</ContextMenuSubTrigger>
						<ContextMenuSubContent
							className="w-44"
							dir={dir}
							data-lang={dir === "rtl" ? language : undefined}
						>
							<ContextMenuGroup>
								<ContextMenuItem>
									<ArrowLeftIcon
										className="rtl:rotate-180"
										data-icon="inline-end"
									/>
									{t.back}
									<ContextMenuShortcut>⌘[</ContextMenuShortcut>
								</ContextMenuItem>
								<ContextMenuItem disabled>
									<ArrowRightIcon
										className="rtl:rotate-180"
										data-icon="inline-end"
									/>
									{t.forward}
									<ContextMenuShortcut>⌘]</ContextMenuShortcut>
								</ContextMenuItem>
								<ContextMenuItem>
									<RotateCwIcon />
									{t.reload}
									<ContextMenuShortcut>⌘R</ContextMenuShortcut>
								</ContextMenuItem>
							</ContextMenuGroup>
						</ContextMenuSubContent>
					</ContextMenuSub>
					<ContextMenuSub>
						<ContextMenuSubTrigger>{t.moreTools}</ContextMenuSubTrigger>
						<ContextMenuSubContent
							className="w-44"
							dir={dir}
							data-lang={dir === "rtl" ? language : undefined}
						>
							<ContextMenuGroup>
								<ContextMenuItem>{t.savePage}</ContextMenuItem>
								<ContextMenuItem>{t.createShortcut}</ContextMenuItem>
								<ContextMenuItem>{t.nameWindow}</ContextMenuItem>
							</ContextMenuGroup>
							<ContextMenuSeparator />
							<ContextMenuGroup>
								<ContextMenuItem>{t.developerTools}</ContextMenuItem>
							</ContextMenuGroup>
							<ContextMenuSeparator />
							<ContextMenuGroup>
								<ContextMenuItem variant="destructive">
									{t.delete}
								</ContextMenuItem>
							</ContextMenuGroup>
						</ContextMenuSubContent>
					</ContextMenuSub>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuCheckboxItem checked>
						{t.showBookmarks}
					</ContextMenuCheckboxItem>
					<ContextMenuCheckboxItem>{t.showFullUrls}</ContextMenuCheckboxItem>
				</ContextMenuGroup>
				<ContextMenuSeparator />
				<ContextMenuGroup>
					<ContextMenuRadioGroup value={people} onValueChange={setPeople}>
						<ContextMenuLabel>{t.people}</ContextMenuLabel>
						<ContextMenuRadioItem value="pedro">{t.pedro}</ContextMenuRadioItem>
						<ContextMenuRadioItem value="colm">{t.colm}</ContextMenuRadioItem>
					</ContextMenuRadioGroup>
				</ContextMenuGroup>
			</ContextMenuContent>
		</ContextMenu>
	);
}

API Reference

See the Base UI documentation for the full API reference.