Context Menu for Angular

import { AuiContextMenu } from '@absoluteui/angular/context-menu';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Context Menu page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { contextMenu: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import type { ContextMenuSelectDetail, MenuItem } from '@absoluteui/components/context-menu';
import { AuiContextMenu } from '@absoluteui/angular/context-menu';

@Component({
  selector: 'app-file-list',
  imports: [AuiContextMenu],
  template: `
    <p id="files-hint">Right-click a file or press Shift+F10 for actions.</p>
    <ul aria-describedby="files-hint" [auiContextMenu]="items" contextMenuLabel="File actions" (selected)="onSelect($event)">
      @for (file of files; track file) {
        <li tabindex="0" [attr.data-file]="file">{{ file }}</li>
      }
    </ul>
  `,
})
export class FileListComponent {
  readonly files = ['report.md', 'notes.txt'];
  readonly items: MenuItem[] = [
    { id: 'rename', label: 'Rename' },
    { id: 'delete', label: 'Delete', tone: 'danger' },
  ];

  onSelect(detail: ContextMenuSelectDetail): void {
    const file = detail.origin.closest('[data-file]')?.getAttribute('data-file');
    if (detail.id === 'delete' && file) {
      // confirm and delete the file
    }
  }
}

[auiContextMenu]

Class AuiContextMenu; template reference #ref="auiContextMenu".

AbsoluteUI Context Menu, on the target element: <div [auiContextMenu]="items" contextMenuLabel="File actions" (selected)="run($event)">...</div>. The target keeps its Angular-managed children; the menu popup is appended to the enclosing modal dialog or <body>.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiContextMenu	readonly MenuItem[]		Required. Menu items (the Menu item model: action with optional submenu items, checkbox, radio, separator, group). Ids are unique across the whole tree. An empty array is allowed.
contextMenuLabel	string		aria-label of the menu. Default: localized ‘Context menu’. Must be non-empty when set.
contextMenuDisabled	boolean	false	While true, right-click and the keyboard keys keep the browser’s native behavior and open() is still possible; setting it closes an open menu.
closeOnSelect	boolean	true	Close after activating a checkbox or radio item. Action items always close the menu.
typeahead	boolean	true	Printable characters move focus to the next item whose label starts with them.
nativeModifier	ContextMenuNativeModifier	'shift'	‘shift’: Shift+right-click is left to the browser’s native menu. ‘none’: every right-click opens the component menu.
direction	"ltr" | "rtl"	'ltr'	Logical alignment, submenu side, submenu arrow keys, and chevron mirroring.
icons	Partial<MenuIcons>		Icon slot overrides.
renderItem	MenuRenderItem		Custom item content as a function; or put <ng-template auiItem let-item> inside the host (since 0.9.0).

Outputs

Output	Payload	Description
(selected)	ContextMenuSelectDetail	Dispatched on the target when the user activates an enabled item. origin is the element the menu was opened for; checked is the new state for checkbox and radio items. Re-emits aui-select.
(opened)	null	Dispatched on the menu element after the top level opened. Re-emits aui-open.
(closed)	null	Dispatched on the menu element after all levels closed. Re-emits aui-close.

Methods

Call them through a viewChild query or a template reference.

Method	Description
open(point?: { x: number; y: number; } | undefined): void	Open at client coordinates, or below the target.
close(): void	Close the menu (and its submenus).