Installation
import {
WrContextMenu,
WrContextMenuPanel,
WrContextMenuItem,
WrContextMenuDivider,
} from 'ngwr/context-menu';
@Component({
imports: [WrContextMenu, WrContextMenuPanel, WrContextMenuItem, WrContextMenuDivider],
})
export class MyComponent {}Basic
Right-click the area below.
<div [wrContextMenu]="menu">Right-click me</div>
<wr-context-menu #menu>
<wr-context-menu-item icon="copy" (click)="copy()">Copy</wr-context-menu-item>
<wr-context-menu-item icon="document" (click)="paste()">Paste</wr-context-menu-item>
<wr-context-menu-item icon="trash" (click)="remove()">Delete</wr-context-menu-item>
</wr-context-menu>Dividers
Drop <wr-context-menu-divider /> between items to visually group related actions. Useful for separating destructive actions from the rest.
<wr-context-menu #menu>
<wr-context-menu-item icon="copy" (click)="copy()">Copy</wr-context-menu-item>
<wr-context-menu-item icon="document" (click)="paste()">Paste</wr-context-menu-item>
<wr-context-menu-item icon="cog" (click)="settings()">Settings</wr-context-menu-item>
<wr-context-menu-divider />
<wr-context-menu-item icon="trash" (click)="remove()">Delete</wr-context-menu-item>
</wr-context-menu>Submenus
Pass another <wr-context-menu> to [submenu] to nest a submenu off any item. Hover to open, or press the arrow the menu cascades toward — → in LTR, ← under RTL, since the panes mirror with the reading direction and a fixed key would ask an RTL reader to press toward the parent. The opposite arrow, or a click outside, closes it. Submenus can themselves contain submenus — the API is recursive.
<div [wrContextMenu]="rootMenu">Right-click me</div>
<wr-context-menu #rootMenu>
<wr-context-menu-item icon="copy" (click)="copy()">Copy</wr-context-menu-item>
<wr-context-menu-item icon="document" (click)="paste()">Paste</wr-context-menu-item>
<wr-context-menu-divider />
<wr-context-menu-item icon="cog" [submenu]="shareMenu">Share</wr-context-menu-item>
<wr-context-menu-divider />
<wr-context-menu-item icon="trash" (click)="remove()">Delete</wr-context-menu-item>
</wr-context-menu>
<!-- Nested submenu — hover the parent item to open. Pressing → also opens it. -->
<wr-context-menu #shareMenu>
<wr-context-menu-item (click)="copyLink()">Copy link</wr-context-menu-item>
<wr-context-menu-item (click)="emailLink()">Email…</wr-context-menu-item>
<wr-context-menu-divider />
<!-- Submenus can themselves own submenus — the API is recursive. -->
<wr-context-menu-item [submenu]="exportMenu">Export as…</wr-context-menu-item>
</wr-context-menu>
<wr-context-menu #exportMenu>
<wr-context-menu-item (click)="exportPdf()">PDF</wr-context-menu-item>
<wr-context-menu-item (click)="exportPng()">PNG</wr-context-menu-item>
<wr-context-menu-item (click)="exportSvg()">SVG</wr-context-menu-item>
</wr-context-menu>Custom templates
<wr-context-menu> projects any content between its tags — drop in arbitrary markup alongside items for headers, descriptions, keyboard hints, or fully bespoke rows.
<wr-context-menu #menu>
<!-- Anything projected between tags renders inline alongside items. -->
<div class="my-header">
<span class="my-header__title">readme.md</span>
<span class="my-header__sub">2 KB · modified just now</span>
</div>
<wr-context-menu-divider />
<!-- Items also project their own content — drop in keyboard hints,
badges, or any inline element next to the label. -->
<wr-context-menu-item icon="copy" (click)="copy()">
Copy
<span class="my-kbd">⌘C</span>
</wr-context-menu-item>
<wr-context-menu-item icon="document" (click)="paste()">
Paste
<span class="my-kbd">⌘V</span>
</wr-context-menu-item>
</wr-context-menu>Template reference
Two names, deliberately: the panel is wrContextMenu — that is what <wr-context-menu #menu> hands to the trigger — and the TRIGGER directive is wrContextMenuTrigger.
<div [wrContextMenu]="menu" #area="wrContextMenuTrigger">Right-click me</div>
<wr-context-menu #menu>
<wr-context-menu-item>Copy</wr-context-menu-item>
</wr-context-menu>
<!-- Anywhere else in the same template -->
<wr-btn (click)="area.close()">Dismiss the menu</wr-btn>Directive API
| Name | Description | Type | Default |
|---|---|---|---|
[wrContextMenu] | Menu to open on right-click. Required. | WrContextMenuPanel | — |
Item API
| Name | Description | Type | Default |
|---|---|---|---|
icon | Optional leading icon. | WrIconName | null | null |
disabled | Suppress click + keyboard activation. | boolean | false |
submenu | Optional nested menu. Opens to the right on hover or →. Shows a chevron indicator. ← (or click-outside) closes it. | WrContextMenuPanel | null | null |