styledMenu
ContextMenu
A right-click triggered menu with keyboard navigation, nested submenus, and WAI-ARIA support.
Right-click here
preview
Usage#
import { ContextMenu } from '@primereact/ui/contextmenu';<ContextMenu.Root>
<ContextMenu.Trigger>
<div>Right-click here</div>
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup>
<ContextMenu.List>
<ContextMenu.Item>Copy</ContextMenu.Item>
<ContextMenu.Item>Paste</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Item>Delete</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>Examples#
Basic#
A standard context menu opened with a right-click on the trigger area.
Right-click here
basic-demo
'use client';
import { ContextMenu } from '@primereact/ui/contextmenu';
export default function BasicDemo() {
return (
<ContextMenu.Root>
<ContextMenu.Trigger className="flex items-center justify-center w-full max-w-md mx-auto h-40 rounded-md border-2 border-dashed border-surface-200 dark:border-surface-700 text-sm text-surface-500 dark:text-surface-400 select-none">
Right-click here
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup className="w-40">
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>Cut</ContextMenu.Item>
<ContextMenu.Item>Copy</ContextMenu.Item>
<ContextMenu.Item>Paste</ContextMenu.Item>
<ContextMenu.Item>Rename</ContextMenu.Item>
</ContextMenu.Group>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Item className="text-red-600!">Delete</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>
);
}
Submenus#
Nest a ContextMenu.Sub inside any ContextMenu.List. Reuse the same ContextMenu.Portal / ContextMenu.Positioner / ContextMenu.Popup parts at any level — there are no separate sub-prefixed components.
Right-click here
submenu-demo
'use client';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { Copy } from '@primeicons/react/copy';
import { Download } from '@primeicons/react/download';
import { ExternalLink } from '@primeicons/react/external-link';
import { File } from '@primeicons/react/file';
import { Folder } from '@primeicons/react/folder';
import { Link } from '@primeicons/react/link';
import { Send } from '@primeicons/react/send';
import { Trash } from '@primeicons/react/trash';
import { ContextMenu } from '@primereact/ui/contextmenu';
export default function SubmenuDemo() {
return (
<ContextMenu.Root>
<ContextMenu.Trigger className="flex items-center justify-center w-full max-w-md mx-auto h-40 rounded-md border-2 border-dashed border-surface-200 dark:border-surface-700 text-sm text-surface-500 dark:text-surface-400 select-none">
Right-click here
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup className="w-40">
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>
<Copy />
Copy
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>
<Link />
Share
<ContextMenu.Indicator>
<ChevronRight className="size-3.5" />
</ContextMenu.Indicator>
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup className="w-40">
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>
<Send />
Send via email
</ContextMenu.Item>
<ContextMenu.Item>
<Link />
Copy link
</ContextMenu.Item>
<ContextMenu.Item>
<ExternalLink />
Open in new tab
</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>
<Download />
Save as
<ContextMenu.Indicator>
<ChevronRight className="size-3.5" />
</ContextMenu.Indicator>
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup className="w-40">
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>
<File />
PDF
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>
<File />
Image
<ContextMenu.Indicator>
<ChevronRight className="size-3.5" />
</ContextMenu.Indicator>
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup className="w-40">
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>PNG</ContextMenu.Item>
<ContextMenu.Item>JPG</ContextMenu.Item>
<ContextMenu.Item>WebP</ContextMenu.Item>
<ContextMenu.Item>SVG</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Sub>
<ContextMenu.Item>
<Folder />
ZIP archive
</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Sub>
</ContextMenu.Group>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Item className="text-red-600!">
<Trash />
Delete
</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>
);
}
Global#
Setting the global property on ContextMenu.Root attaches the context menu to the document.
Right-Click anywhere on this page to view the global ContextMenu.
global-demo
import { ChartLine } from '@primeicons/react/chart-line';
import { ChevronRight } from '@primeicons/react/chevron-right';
import { Clipboard } from '@primeicons/react/clipboard';
import { Copy } from '@primeicons/react/copy';
import { ExternalLink } from '@primeicons/react/external-link';
import { Folder } from '@primeicons/react/folder';
import { Home } from '@primeicons/react/home';
import { Print } from '@primeicons/react/print';
import { QuestionCircle } from '@primeicons/react/question-circle';
import { Refresh } from '@primeicons/react/refresh';
import { Search } from '@primeicons/react/search';
import { ContextMenu } from '@primereact/ui/contextmenu';
export default function GlobalDemo() {
return (
<div>
<p className="mb-0">Right-Click anywhere on this page to view the global ContextMenu.</p>
<ContextMenu.Root global>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup>
<ContextMenu.List className="w-48">
<ContextMenu.Group>
<ContextMenu.Item>
<Home />
Back
</ContextMenu.Item>
<ContextMenu.Item>
<Refresh />
Reload
</ContextMenu.Item>
</ContextMenu.Group>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Item>
<Copy />
Copy
</ContextMenu.Item>
<ContextMenu.Item>
<Clipboard />
Paste
</ContextMenu.Item>
</ContextMenu.Group>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Sub>
<ContextMenu.SubTrigger>
<Folder />
View
<ContextMenu.Indicator>
<ChevronRight />
</ContextMenu.Indicator>
</ContextMenu.SubTrigger>
<ContextMenu.Portal>
<ContextMenu.Positioner>
<ContextMenu.Popup>
<ContextMenu.List>
<ContextMenu.Group>
<ContextMenu.Item>
<Search />
Zoom In
</ContextMenu.Item>
<ContextMenu.Item>
<Search />
Zoom Out
</ContextMenu.Item>
<ContextMenu.Item>
<ChartLine />
Page Source
</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Sub>
</ContextMenu.Group>
<ContextMenu.Separator />
<ContextMenu.Group>
<ContextMenu.Item>
<ExternalLink />
Open Link
</ContextMenu.Item>
<ContextMenu.Item>
<Print />
Print
</ContextMenu.Item>
<ContextMenu.Item>
<QuestionCircle />
Inspect
</ContextMenu.Item>
</ContextMenu.Group>
</ContextMenu.List>
</ContextMenu.Popup>
</ContextMenu.Positioner>
</ContextMenu.Portal>
</ContextMenu.Root>
</div>
);
}
API#
Sub-Components#
See Primitive API for ContextMenuRoot, ContextMenuTrigger, ContextMenuPortal, ContextMenuPositioner, ContextMenuPopup, ContextMenuArrow, ContextMenuList, ContextMenuGroup, ContextMenuLabel, ContextMenuSeparator, ContextMenuItem, ContextMenuRadioGroup, ContextMenuSub, ContextMenuSubTrigger, ContextMenuIndicator component documentation.
Hooks#
See Headless API for useContextMenu and useContextMenuSub hook documentation.
Accessibility#
See ContextMenu Primitive for WAI-ARIA compliance details and keyboard support.