Angular ContextMenu

Angular ContextMenu displays an overlay menu on right click of its target. Note that components like DataTable has special integration with ContextMenu. Refer to documentation of the individual documentation of the with context menu support.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {ContextMenuModule} from 'primeng/contextmenu';
import {MenuItem} from 'primeng/api';

MenuModel API

ContextMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

ContextMenu requires nested menuitems as its model and in its simplest form ContextMenu is attached to the document with global setting. .

<p-contextMenu [global]="true" [model]="items"></p-contextMenu>

Target

ContextMenu can be attached to a particular element whose local template variable name is defined using the target property.

<p-contextMenu [target]="img" [model]="items2" ></p-contextMenu>

<img #img src="assets/showcase/images/primeng.svg" alt="Logo">

Exclusive Integrations

Some components like Table require special attention so they provide a different method to attach a context menu. Refer to individual documentation of components with special integration like Table.

export class ContextMenuDemo {

    private items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            }
        ];
    }
}

Theming

ContextMenu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG ContextMenu showcase for demos and documentation.