ContextMenu Right click anywhere on this page to view the context-menu options.

Import


import {ContextMenu} from 'primeng/primeng';

Getting Started

ContextMenu requires a list element as its child. Menus can be tiered using nested lists.


<p-tieredMenu>
     <ul>
         <li> <a data-icon="fa-file-o"><span>File</span></a>
             <ul>
                 <li><a data-icon="fa-plus"><span>New</span></a>
                     <ul>
                         <li><a><span>Project</span></a></li>
                         <li><a><span>Other</span></a></li>
                     </ul>
                 </li>
                 <li><a><span>Open</span></a></li>
                 <li><a><span>Quit</span></a></li>
             </ul>
         </li>
         <li> <a data-icon="fa-edit">Edit</a>
             <ul>
                 <li><a data-icon="fa-mail-forward"><span>Undo</span></a></li>
                 <li><a data-icon="fa-mail-reply"><span>Redo</span></a></li>
             </ul>
         </li>
     </ul>
</p-tieredMenu>

Icons

An icon of a menuitem is defined using data-icon attribute.


<a data-icon="fa-plus"><span>New</span></a>

Attributes

Name Type Default Description
style string null Inline style of the component.
styleClass string null Style class of the component.
global boolean false When enabled, contextmenu is attached to the document itself.

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name Element
ui-contextmenu Container element.
ui-menu-list List element.
ui-menuitem Menuitem element.
ui-menuitem-text Label of a menuitem.
ui-menuitem-icon Icon of a menuitem.
ui-submenu-icon Arrow icon of a submenu.

Dependencies

PrimeUI TieredMenu.


Default

<p-contextMenu [global]="true"> <ul> <li> <a data-icon="fa-file-o"><span>File</span></a> <ul> <li><a data-icon="fa-plus"><span>New</span></a> <ul> <li><a><span>Project</span></a></li> <li><a><span>Other</span></a></li> </ul> </li> <li><a><span>Open</span></a></li> <li><a><span>Quit</span></a></li> </ul> </li> <li> <a data-icon="fa-edit">Edit</a> <ul> <li><a data-icon="fa-mail-forward"><span>Undo</span></a></li> <li><a data-icon="fa-mail-reply"><span>Redo</span></a></li> </ul> </li> <li> <a data-icon="fa-question">Help</a> <ul> <li><a><span>Contents</span></a></li> <li> <a data-icon="fa-search"><span>Search</span></a> <ul> <li><a>Text</a> <ul> <li><a><span>Workspace</span></a></li> </ul> </li> <li><a><span>File</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-gear">Actions</a> <ul> <li><a data-icon="fa-refresh"><span>Edit</span></a> <ul> <li><a data-icon="fa-save"><span>Save</span></a></li> <li><a data-icon="fa-save"><span>Update</span></a></li> </ul> </li> <li><a data-icon="fa-phone">Other</a> <ul> <li><a data-icon="fa-minus"><span>Delete</span></a></li> </ul> </li> </ul> </li> <li> <a data-icon="fa-close"><span>Quit</span></a> </li> </ul> </p-contextMenu>