ContextMenu

Basic

Right-click the workspace, or focus it and press Shift+F10. Try Share → Export to explore nested actions.

Template and selection

Each file supplies its own context. Actions below only update the demo message.

<av-context-menu #menu [model]="items">
  <ng-template #item let-item>
    <strong>{{ item.label }}</strong>
    <small>{{ item.badge }}</small>
  </ng-template>
</av-context-menu>

<!-- Call menu.show(event) from a contextmenu or keyboard handler. -->

Document

Enable a document-wide menu, then right-click outside the examples. Turn it off to restore the browser menu.

Usage

import { AvContextMenu, AvContextMenuItem } from 'avero-ui';

items: AvContextMenuItem[] = [
  { label: 'Open', command: () => this.open() },
  { label: 'Export', items: [{ label: 'PDF', command: () => this.exportPdf() }] },
  { separator: true },
  { label: 'Disabled action', disabled: true }
];

<div #target tabindex="0" aria-haspopup="menu">Right-click here</div>
<av-context-menu [target]="target" [model]="items" />

API and accessibility

Inputs: model, target, global, disabled, ariaLabel. Methods: show(event), hide(restoreFocus?). Read visible() and listen to onShow, onHide or onItemClick.

Items support label, icon (CSS class), shortcut (display only), badge, items, separator, disabled, visible, command, routerLink, url and target. Custom item templates provide non-interactive content inside the built-in menuitem.

Use Up/Down, Home/End to move, Right/Left to enter or leave submenus, Enter/Space to activate and Escape to close and return focus. Typing finds an item by label. Tab closes the menu and continues from the trigger. Give custom targets tabindex="0" and aria-haspopup="menu".