Context Menu

A menu that opens on right-click or keyboard shortcut. Follows the menu button pattern, providing context-specific actions for a targeted area.

Preview Code

Interactive

Features

Full keyboard navigation with arrow keys.
Supports submenus with nested navigation.
Checkbox and radio group items.
Type-ahead search for quick navigation.
Supports keyboard trigger (Shift+F10 or ContextMenu key).
Automatic positioning with overflow detection.
Focus management with roving tabindex.
Accessible labels and ARIA attributes.

Installation

Install the component from your command line.

Angular CLInpmpnpmyarnbun

Bash

ng g @ng-cn/core:c context-menu

Anatomy

Import all parts and piece them together.

Typescript

import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuCheckboxItem,
  ContextMenuRadioItem,
  ContextMenuLabel,
  ContextMenuSeparator,
  ContextMenuShortcut,
  ContextMenuSub,
  ContextMenuSubTrigger,
  ContextMenuSubContent,
  ContextMenuRadioGroup
} from '@/ui/context-menu';

Html

<ContextMenu>
  <ContextMenuTrigger>Right click</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Edit
      <ContextMenuShortcut>⌘E</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>More Tools</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Save Page As...</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>

API Reference

Root

Contains all the parts of a context menu.

Prop	Type	Default
class	`string`	—
Additional CSS classes to apply to the context menu root.

Data Attributes

Attribute	Values
[data-state]	`"open" \| "closed"`

Trigger

The element that opens the context menu on right-click.

Prop	Type	Default
class	`string`	—
Additional CSS classes.

Content

The dropdown menu content containing the menu items.

Prop	Type	Default
class	`string`	—
Additional CSS classes to customize menu appearance.

Data Attributes

Attribute	Values
[data-state]	`"open" \| "closed"`

Item

A single menu item.

Prop	Type	Default
disabled	`boolean`	false
When true, prevents interaction with the item.
inset	`boolean`	false
When true, adds extra left padding (for alignment).
class	`string`	—
Additional CSS classes.

Data Attributes

Attribute	Values
[data-disabled]	`""`

CheckboxItem

A menu item with a checkbox.

Prop	Type	Default
checked	`boolean`	false
The checked state of the checkbox item.
disabled	`boolean`	false
When true, prevents interaction.
inset	`boolean`	false
When true, adds extra left padding.
class	`string`	—
Additional CSS classes.

Data Attributes

Attribute	Values
[data-state]	`"checked" \| "unchecked"`
[data-disabled]	`""`

RadioGroup

A group of radio menu items.

Prop	Type	Default
value	`string`	—
The currently selected radio item value.
class	`string`	—
Additional CSS classes.

RadioItem

A menu item with a radio button.

Prop	Type	Default
value	`string`	—
The value of the radio item.
disabled	`boolean`	false
When true, prevents interaction.
inset	`boolean`	false
When true, adds extra left padding.
class	`string`	—
Additional CSS classes.

Data Attributes

Attribute	Values
[data-state]	`"checked" \| "unchecked"`
[data-disabled]	`""`

Label

A non-interactive label for menu items.

Prop	Type	Default
inset	`boolean`	false
When true, adds extra left padding for alignment.
class	`string`	—
Additional CSS classes.

Separator

A visual separator between menu items.

Prop	Type	Default
class	`string`	—
Additional CSS classes.

Shortcut

A keyboard shortcut display for menu items.

Prop	Type	Default
class	`string`	—
Additional CSS classes.

Sub

Container for a submenu.

Prop	Type	Default
class	`string`	—
Additional CSS classes.

SubTrigger

The item that opens a submenu.

Prop	Type	Default
disabled	`boolean`	false
When true, prevents interaction.
inset	`boolean`	false
When true, adds extra left padding.
class	`string`	—
Additional CSS classes.

Data Attributes

Attribute	Values
[data-state]	`"open" \| "closed"`
[data-disabled]	`""`

SubContent

The content of a submenu.

Prop	Type	Default
class	`string`	—
Additional CSS classes.

Data Attributes

Attribute	Values
[data-state]	`"open" \| "closed"`

Examples

Basic context menu

A simple context menu with basic menu items.

Html

<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click here
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Back</ContextMenuItem>
    <ContextMenuItem>Forward</ContextMenuItem>
    <ContextMenuItem>Reload</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Print...</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With keyboard shortcut display

Context menu items with visible keyboard shortcuts.

Html

<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click for options
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Edit
      <ContextMenuShortcut>⌘E</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Duplicate
      <ContextMenuShortcut>⌘D</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Delete
      <ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With submenus

Nested context menus with arrow key navigation.

Html

<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click for more options
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>View Page Source</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Email link</ContextMenuItem>
        <ContextMenuItem>Messages</ContextMenuItem>
        <ContextMenuItem>Notes</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem>
      Save Page As...
      <ContextMenuShortcut>⌘S</ContextMenuShortcut>
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

With checkbox items

Checkbox items for toggling options in a context menu.

Html

// In your component class:
showBookmarks = signal(false);
showFullUrls = signal(true);

// In your template:
<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click for settings
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuCheckboxItem
      [checked]="showBookmarks()"
      (checkedChange)="showBookmarks.set($event)"
    >
      Show Bookmarks
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem
      [checked]="showFullUrls()"
      (checkedChange)="showFullUrls.set($event)"
    >
      Show Full URLs
    </ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>

With radio group

Radio items for selecting one option from a group.

Html

// In your component class:
viewMode = signal('list');

// In your template:
<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click to change view
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>View Mode</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuRadioGroup
      [value]="viewMode()"
      (valueChange)="viewMode.set($event)"
    >
      <ContextMenuRadioItem value="list">List View</ContextMenuRadioItem>
      <ContextMenuRadioItem value="grid">Grid View</ContextMenuRadioItem>
      <ContextMenuRadioItem value="compact">Compact View</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>

Complex menu

A feature-rich context menu with labels, items, separators, and submenus.

Html

// In your component class:
isLocked = signal(false);
fileType = signal('pdf');

// In your template:
<ContextMenu>
  <ContextMenuTrigger class="flex h-[200px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click on this file
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      Open
      <ContextMenuShortcut>⏎</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuItem>
      Open With
      <ContextMenuShortcut>⌘↵</ContextMenuShortcut>
    </ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem>Edit</ContextMenuItem>
    <ContextMenuItem>Rename</ContextMenuItem>
    <ContextMenuCheckboxItem
      [checked]="isLocked()"
      (checkedChange)="isLocked.set($event)"
    >
      Lock
    </ContextMenuCheckboxItem>
    <ContextMenuSeparator />
    <ContextMenuSub>
      <ContextMenuSubTrigger>Convert to</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuRadioGroup
          [value]="fileType()"
          (valueChange)="fileType.set($event)"
        >
          <ContextMenuRadioItem value="pdf">PDF</ContextMenuRadioItem>
          <ContextMenuRadioItem value="docx">Word Document</ContextMenuRadioItem>
          <ContextMenuRadioItem value="xlsx">Excel Sheet</ContextMenuRadioItem>
        </ContextMenuRadioGroup>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem class="text-destructive">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Disabled items

Context menu with disabled items for unavailable actions.

Html

// In your component class:
canDelete = signal(false);

// In your template:
<ContextMenu>
  <ContextMenuTrigger class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm">
    Right click - some items are disabled
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Cut</ContextMenuItem>
    <ContextMenuItem>Copy</ContextMenuItem>
    <ContextMenuItem>Paste</ContextMenuItem>
    <ContextMenuSeparator />
    <ContextMenuItem [disabled]="true">
      Duplicate (Locked file)
    </ContextMenuItem>
    <ContextMenuItem [disabled]="!canDelete()">Delete</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

Accessibility

Adheres to the Menu and Menubar WAI-ARIA design pattern .

Keyboard Interactions

Key	Description
`Space`	When focus is on an item, activates the item or opens a submenu.
`Enter`	When focus is on an item, activates the item or opens a submenu.
`ArrowDown`	Moves focus to the next menu item.
`ArrowUp`	Moves focus to the previous menu item.
`ArrowRight`	When on a SubTrigger, opens the submenu or moves focus into it.
`ArrowLeft`	When in a submenu, closes the submenu and returns to the parent menu.
`Home`	Moves focus to the first menu item.
`End`	Moves focus to the last menu item.
`Tab`	Closes the menu and moves focus to the next focusable element.
`Escape`	Closes the menu and returns focus to the trigger element.
`Shift + F10`	Opens the context menu on the trigger element (Windows convention).
`ContextMenu`	Opens the context menu on the trigger element (keyboard-only users).
`Character`	Types a character to jump to the next menu item starting with that letter.

Features

Installation

Anatomy

API Reference

Root

Data Attributes

Trigger

Content

Data Attributes

Item

Data Attributes

CheckboxItem

Data Attributes

RadioGroup

RadioItem

Data Attributes

Label

Separator

Shortcut

Sub

SubTrigger

Data Attributes

SubContent

Data Attributes

Examples

Basic context menu

With keyboard shortcut display

With submenus

With checkbox items

With radio group

Complex menu

Disabled items

Accessibility

Keyboard Interactions

Additional Links