Context Menu

A right-click menu that opens at the pointer. Attach [ply-context-menu-trigger] to any host, then define items inside <ply-context-menu>. Also opens with Shift+F10 or the Context Menu key when the host is focused.

free

Basic

Right-click the surface below (or focus it and press Shift+F10).

Right-click here

Or focus and press Shift+F10

HTML

<div tabindex="0" [ply-context-menu-trigger]="basicMenu">
  Right-click here
</div>

<ply-context-menu #basicMenu>
  <button ply-context-menu-item type="button" (click)="run('Copy')">
    <ply-icon name="copy" class="mr-3 h-4 w-4 stroke-slate-500"></ply-icon>
    Copy
  </button>
  <button ply-context-menu-item type="button" (click)="run('Cut')">Cut</button>
  <button ply-context-menu-item type="button" (click)="run('Paste')">Paste</button>
  <ply-divider class="my-1"></ply-divider>
  <button ply-context-menu-item type="button" (click)="run('Delete')">Delete</button>
</ply-context-menu>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add context-menu
// Paths are relative to aliases.components (default: src/app/components)
import { ContextMenuPanel } from './context-menu/context-menu-panel';
import { ContextMenuComponent } from './context-menu/context-menu.component';
import { ContextMenuDirective } from './context-menu/context-menu.directive';

@Component({
  selector: 'app-context-menu-example',
  imports: [
    ContextMenuComponent,
    ContextMenuDirective
  ],
  template: `...`
})
export class ContextMenuExampleComponent {}

Install

bash

npx ply-ui-cli add context-menu

File list

Each row can bind its own menu. Useful for file managers, tables, and lists.

Brand guidelines.pdf
PDF
Right-click
Hero mockup.png
Image
Right-click
Launch notes.md
Doc
Right-click

HTML

<ul>
  @for (file of files; track file.id) {
    <li
      tabindex="0"
      [ply-context-menu-trigger]="fileMenu"
      (contextmenu)="setActiveFile(file)"
      (keydown.shift.f10)="setActiveFile(file)">
      {{ file.name }}
    </li>
  }
</ul>

<ply-context-menu #fileMenu>
  <button ply-context-menu-item type="button" (click)="runOnFile('Open')">Open</button>
  <button ply-context-menu-item type="button" (click)="runOnFile('Rename')">Rename</button>
  <button ply-context-menu-item type="button" (click)="runOnFile('Delete')">Delete</button>
</ply-context-menu>

TypeScript

readonly files = [
  { id: 1, name: 'Brand guidelines.pdf', kind: 'PDF' },
  { id: 2, name: 'Hero mockup.png', kind: 'Image' },
];

activeFile: { id: number; name: string; kind: string } | null = null;

setActiveFile(file: typeof this.files[number]): void {
  this.activeFile = file;
}

runOnFile(action: string): void {
  console.log(action, this.activeFile?.name);
}

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add context-menu
// Paths are relative to aliases.components (default: src/app/components)
import { ContextMenuPanel } from './context-menu/context-menu-panel';
import { ContextMenuComponent } from './context-menu/context-menu.component';
import { ContextMenuDirective } from './context-menu/context-menu.directive';

@Component({
  selector: 'app-context-menu-example',
  imports: [
    ContextMenuComponent,
    ContextMenuDirective
  ],
  template: `...`
})
export class ContextMenuExampleComponent {}

Install

bash

npx ply-ui-cli add context-menu

Installation

Run the following command to add this component to your project:

bash

npx ply-ui-cli add context-menu

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add context-menu
// Paths are relative to aliases.components (default: src/app/components)
import { ContextMenuPanel } from './context-menu/context-menu-panel';
import { ContextMenuComponent } from './context-menu/context-menu.component';
import { ContextMenuDirective } from './context-menu/context-menu.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    ContextMenuComponent,
    ContextMenuDirective
  ],
  template: `...`
})
export class YourComponent {}

API for context-menu — generated from JSDoc in the library source.

API reference for context-menu
API	Member	Type	Default	Description
`ContextMenuPanel`	`templateRef`	`Signal<TemplateRef<T>>`	—	—
`ContextMenuPanel`	`closed`	`OutputEmitterRef<void>`	—	—
`ply-context-menu`	`size`	`string`	—	Optional custom width for the context menu container.
`ply-context-menu`	`(closed)`	`void`	—	Emitted when the menu should close (Escape, Tab, or after an item is chosen).
`[ply-context-menu-trigger]`	`ply-context-menu-trigger`	`ContextMenuPanel<T>`	`(required)`	The reference to the `ply-context-menu` component to open.
`[ply-context-menu-trigger]`	`disabled`	`boolean`	`false`	When true, the native browser context menu is not suppressed and the Ply menu will not open.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).