ContextMenu uses Menu component and displays an overlay menu to display actions related to a trigger.
import { ContextMenu } from 'primereact/contextmenu';<ContextMenu>
<ContextMenu.Trigger />
<ContextMenu.Portal>
<ContextMenu.List>
<ContextMenu.Label />
<ContextMenu.Item />
<ContextMenu.Separator />
<ContextMenu.CheckboxItem>
<ContextMenu.CheckboxIcon />
</ContextMenu.CheckboxItem>
<ContextMenu.RadioGroup>
<ContextMenu.RadioItem>
<ContextMenu.RadioIcon />
</ContextMenu.RadioItem>
<ContextMenu.RadioItem>
<ContextMenu.RadioIcon />
</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
</ContextMenu.List>
<ContextMenu.Separator />
<ContextMenu.Sub>
<ContextMenu.Trigger>
<ContextMenu.Icon />
</ContextMenu.Trigger>
<ContextMenu.List>
<ContextMenu.Item />
<ContextMenu.Separator />
<ContextMenu.Item />
</ContextMenu.List>
</ContextMenu.Sub>
</ContextMenu.Portal>
</ContextMenu>The main ContextMenu component groups menu items with ContextMenu.List, adds individual menu elements with ContextMenu.Item, uses separators with ContextMenu.Separator, and creates submenus with ContextMenu.Sub. Submenus are triggered by ContextMenu.Trigger and can have their own ContextMenu.List structure.
'use client';
import { ContextMenu } from 'primereact/contextmenu';
export default function BasicDemo() {
return (
<div className="flex justify-center">
<ContextMenu className="w-64">
<ContextMenu.Trigger className="flex justify-center items-center border-2 border-dashed border-surface-200 dark:border-surface-700 w-120 h-64">
Right Click Here
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.List>
<ContextMenu.Item>
<i className="pi pi-home" />
Dashboard
</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Label>Workspace</ContextMenu.Label>
<ContextMenu.Item>
<i className="pi pi-chart-line" />
Analytics
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.Trigger>
<i className="pi pi-folder" />
Projects
<ContextMenu.Icon />
</ContextMenu.Trigger>
<ContextMenu.List>
<ContextMenu.Item>
<i className="pi pi-briefcase" />
Active Projects
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-clock" />
Recent
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.Trigger>
<i className="pi pi-star" />
Favorites
<ContextMenu.Icon />
</ContextMenu.Trigger>
<ContextMenu.List>
<ContextMenu.Item>
<i className="pi pi-code" />
Website Redesign
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-mobile" />
Mobile App
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-database" />
API Development
</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Sub>
<ContextMenu.Item>
<i className="pi pi-check-circle" />
Completed
</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Sub>
<ContextMenu.Sub>
<ContextMenu.Trigger>
<i className="pi pi-users" />
Team
<ContextMenu.Icon />
</ContextMenu.Trigger>
<ContextMenu.List>
<ContextMenu.Item>
<i className="pi pi-user-plus" />
Add Member
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-sitemap" />
Organization
</ContextMenu.Item>
<ContextMenu.Sub>
<ContextMenu.Trigger>
<i className="pi pi-cog" />
Settings
<ContextMenu.Icon />
</ContextMenu.Trigger>
<ContextMenu.List>
<ContextMenu.Item>
<i className="pi pi-shield" />
Permissions
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-bell" />
Notifications
</ContextMenu.Item>
<ContextMenu.Item>
<i className="pi pi-lock" />
Privacy
</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Sub>
</ContextMenu.List>
</ContextMenu.Sub>
<ContextMenu.Separator />
<ContextMenu.Item>
<i className="pi pi-question-circle" />
Help & Support
</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Portal>
</ContextMenu>
</div>
);
}
The ContextMenu component supports checkbox and radio items through ContextMenu.CheckboxItem, ContextMenu.RadioGroup and ContextMenu.RadioItem. These items include their respective icons, ContextMenu.CheckboxIcon and ContextMenu.RadioIcon, to visually indicate their state.
'use client';
import { ContextMenuCheckboxItemCheckedChangeEvent, ContextMenuRadioGroupValueChangeEvent } from '@primereact/types/shared/contextmenu';
import { ContextMenu } from 'primereact/contextmenu';
import * as React from 'react';
export default function RadioCheckboxDemo() {
const [notificationsEnabled, setNotificationsEnabled] = React.useState(true);
const [soundEnabled, setSoundEnabled] = React.useState(false);
const [theme, setTheme] = React.useState('light');
return (
<div className="flex justify-center">
<ContextMenu className="w-64">
<ContextMenu.Trigger className="flex justify-center items-center border-2 border-dashed border-surface-200 dark:border-surface-700 w-120 h-64">
Right Click Here
</ContextMenu.Trigger>
<ContextMenu.Portal>
<ContextMenu.List>
<ContextMenu.Item>Overview</ContextMenu.Item>
<ContextMenu.Separator />
<ContextMenu.Label>Preferences</ContextMenu.Label>
<ContextMenu.CheckboxItem
checked={notificationsEnabled}
onCheckedChange={(e: ContextMenuCheckboxItemCheckedChangeEvent) => setNotificationsEnabled(e.value)}
>
<ContextMenu.CheckboxIcon />
Enable Notifications
</ContextMenu.CheckboxItem>
<ContextMenu.CheckboxItem
checked={soundEnabled}
onCheckedChange={(e: ContextMenuCheckboxItemCheckedChangeEvent) => setSoundEnabled(e.value)}
>
<ContextMenu.CheckboxIcon />
Enable Sound
</ContextMenu.CheckboxItem>
<ContextMenu.Separator />
<ContextMenu.Label>Appearance</ContextMenu.Label>
<ContextMenu.RadioGroup
value={theme}
onValueChange={(e: ContextMenuRadioGroupValueChangeEvent) => setTheme(e.value as string)}
>
<ContextMenu.RadioItem value="light">
<ContextMenu.RadioIcon />
Light Mode
</ContextMenu.RadioItem>
<ContextMenu.RadioItem value="dark">
<ContextMenu.RadioIcon />
Dark Mode
</ContextMenu.RadioItem>
<ContextMenu.RadioItem value="system">
<ContextMenu.RadioIcon />
System Default
</ContextMenu.RadioItem>
</ContextMenu.RadioGroup>
<ContextMenu.Separator />
<ContextMenu.Item>Settings</ContextMenu.Item>
</ContextMenu.List>
</ContextMenu.Portal>
</ContextMenu>
</div>
);
}
ContextMenu component uses the menu role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a menuitem role with aria-label referring to the
label of the item and aria-disabled defined if the item is disabled. The component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup.
| Key | Function |
|---|---|
tab | Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. |
shift + tab | Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. |
enter | Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. |
space | Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. |
escape | If menu is in overlay mode, popup gets closes and focus moves to target. |
down arrow | Moves focus to the next menuitem. |
up arrow | Moves focus to the previous menuitem. |
alt + up arrow | If menu is in overlay mode, popup gets closes and focus moves to the target. |
home | Moves focus to the first menuitem. |
end | Moves focus to the last menuitem. |