# Context Menu

> Attach `[wrContextMenu]` to any element to open a `<wr-context-menu>` at the pointer position on right-click. Native browser menu is suppressed on the host.

Source: https://ngwr.dev/reference/components/context-menu  
Kind: Overlay

## Installation

```angular-ts
import {
  WrContextMenu,
  WrContextMenuPanel,
  WrContextMenuItem,
  WrContextMenuDivider,
} from 'ngwr/context-menu';

@Component({
  imports: [WrContextMenu, WrContextMenuPanel, WrContextMenuItem, WrContextMenuDivider],
})
export class MyComponent {}
```

## Basic

Right-click the area below.

```angular-html
<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.

```angular-html
<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.

```angular-html
<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.

```angular-html
<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`.

```angular-html
<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` |