import {ContextMenu} from 'primeng/primeng';
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>
An icon of a menuitem is defined using data-icon attribute.
<a data-icon="fa-plus"><span>New</span></a>
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. |
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. |
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>