Skip to main content

​
Overview

ContextMenu displays a menu when right-clicking on an element or document.

​
Import

import { MagaryContextMenu, MenuItem } from 'ng-magary';

​
Basic Usage (Global)

<magary-context-menu 
  [model]="items"
  [global]="true">
</magary-context-menu>

<div class="content">
  <p>Right-click anywhere to see the context menu</p>
</div>

​
Target Specific Element

<div #targetElement class="target-area">
  <p>Right-click this area for context menu</p>
</div>

<magary-context-menu 
  [model]="items"
  [target]="targetElement">
</magary-context-menu>

​
With Nested Menus

items: MenuItem[] = [
  {
    label: 'File',
    icon: 'file',
    items: [
      { label: 'New', icon: 'plus' },
      { label: 'Open', icon: 'folder-open' },
      { separator: true },
      {
        label: 'Recent',
        icon: 'clock',
        items: [
          { label: 'document1.txt' },
          { label: 'document2.txt' }
        ]
      }
    ]
  },
  {
    label: 'Edit',
    icon: 'edit',
    items: [
      { label: 'Cut', icon: 'scissors' },
      { label: 'Copy', icon: 'copy' },
      { label: 'Paste', icon: 'clipboard' }
    ]
  }
];

​
Using CSS Selector

<div class="document-area">
  <p>Right-click for options</p>
</div>

<magary-context-menu 
  [model]="items"
  [target]="'.document-area'">
</magary-context-menu>

​
Input Properties

​
model
MenuItem[]
default:"[]"
Array of menu items
​
style
Record<string, any>
Inline styles for the component
​
styleClass
string
CSS class for the component
​
global
boolean
default:"false"
Attach context menu to document (global)
​
target
string | ElementRef | HTMLElement
Element to attach the context menu to

​
Methods

​
show(event)
void
Shows the context menu at event position
​
hide()
void
Hides the context menu

​
Complete Example

<div class="grid">
  <div 
    *ngFor="let item of data"
    class="card"
    (contextmenu)="onContextMenu($event, item)">
    {{ item.name }}
  </div>
</div>

<magary-context-menu 
  #cm
  [model]="menuItems">
</magary-context-menu>

​
Features

  • Global or targeted: Apply to entire document or specific elements
  • Nested menus: Multi-level menu support
  • Auto-positioning: Positioned at cursor location
  • Click outside: Auto-close behavior
  • Viewport aware: Adjusts position to stay in view
  • Custom commands: Execute functions on item click

​
Accessibility

  • Keyboard navigation
  • ARIA attributes
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us