import { Component } from '@angular/core';
import { WrContextMenu, WrContextMenuDivider, WrContextMenuItem, WrContextMenuPanel } from 'ngwr/context-menu';
@Component({ imports: [WrContextMenu, WrContextMenuDivider, WrContextMenuItem, WrContextMenuPanel] })
export class MyComponent {}Context Menu
A right-click menu for any element.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Opening it
Opens on right-click, long press, Shift+F10 or the Menu key; put [wrContextMenu] on a focusable element.
Basic
Right-click the area below.
<div [wrContextMenu]="menu" tabindex="0">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
Put <wr-context-menu-divider /> between items to group them.
<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]. It opens on hover or the arrow key toward it, and can nest further.
<div [wrContextMenu]="rootMenu" tabindex="0">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>
<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 />
<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
The menu and its items render any content you project, such as a header or a key hint.
<wr-context-menu #menu>
<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 />
<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
Export the trigger as wrContextMenuTrigger to close the menu from another control.
<div [wrContextMenu]="menu" tabindex="0" #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 | — |
Panel API
| Name | Description | Type | Default |
|---|---|---|---|
panelClass | Extra class(es) on the menu box. Each submenu takes its own. | WrClassInput | null |
Item API
| Name | Description | Type | Default |
|---|---|---|---|
icon | Optional leading icon. | WrIconName | null | null |
disabled | Suppress click + keyboard activation. | boolean | false |
submenu | Nested menu. Opens on hover or the arrow key toward it. | WrContextMenuPanel | null | null |
CSS variables
Set these on the component's selector or a wrapper, not on :root: the defaults are declared on ngwr/context-menu's own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-context-menu-border | var(--wr-border-base) | .wr-context-menu |
--wr-context-menu-divider-bg | var(--wr-border-base) | .wr-context-menu-divider |
--wr-context-menu-divider-margin-y | var(--wr-space-xs) | .wr-context-menu-divider |
--wr-context-menu-item-chevron-margin-inline-start | var(--wr-space-xs) | .wr-context-menu-item |
--wr-context-menu-item-font-size | var(--wr-text-sm) | .wr-context-menu-item |
--wr-context-menu-item-gap | var(--wr-space-sm) | .wr-context-menu-item |
--wr-context-menu-item-padding-x | var(--wr-space-md) | .wr-context-menu-item |
--wr-context-menu-item-padding-y | var(--wr-space-sm) | .wr-context-menu-item |
--wr-context-menu-item-radius | var(--wr-border-radius-sm) | .wr-context-menu-item |
--wr-context-menu-radius | var(--wr-border-radius-base) | .wr-context-menu |
Dependencies
See also
Component DropdownA menu that opens from any trigger.Component PopoverShow a template, or a text tooltip, next to its trigger.Component Command PaletteA ⌘K search box that finds and runs your app's actions.Guide KeyboardBind shortcuts, show them as keycaps, and see which keys each component handles.Component IconRenders an SVG icon you register by name; ngwr ships none of its own.Guide OverlayStyle ngwr's floating panels and control where focus goes.