ContextMenu is a menu with Graphical User Interface (GUI) representation that appears on top of your page just by right-clicking. By right-clicking, an Overlay menu is displayed on the target element. There are two types of Context menus, one for the document and the other for the specific component. Apart from these two, there is also a special integration with components such as DataTable.

By default, the ContextMenu is attached to the document with the global setting. A basic Context menu example, which displays a document or file type menu, would be as follows:

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

The list of menu items needs to be organized within a component class. For example, a root menu item titled File will have nested items as shown here:

this.documentItems = [
  {
    label: 'File',
    icon: 'fa-file-o',
    items: [{
      label: 'New',
      icon: 'fa-plus',
      items: [
        {label: 'Project'},
        {label: 'Other'},
      ],
      expanded: true
    },
    {label: 'Open'},
    {label: 'Quit'}
    ],
  },
  // more items ...
];

The following screenshot shows a snapshot result of the basic Context menu (with all menu items) example:

The Context menu will disappear once you click on the outside of this component.