import {Menu} from 'primeng/primeng';
Menu requires a list element where each item may either define a submenu header or a menitem.
<p-menu>
<ul>
<li><h3>File</h3></li>
<li><a data-icon="fa-plus"><span>New</span></a></li>
<li><a data-icon="fa-download"><span>Open</span></a></li>
<li><h3>Edit</h3></li>
<li><a data-icon="fa-refresh"><span>Undo</span></a></li>
<li><a data-icon="fa-repeat"><span>Redo</span></a></li>
</ul>
</p-menu>
Menu is inline by default, popup mode is also supported by enabling popup property and defining a trigger element.
<p-menu [popup]="true" [trigger]="btn">
<ul>
<li><h3>File</h3></li>
<li><a data-icon="fa-plus"><span>New</span></a></li>
<li><a data-icon="fa-download"><span>Open</span></a></li>
<li><h3>Edit</h3></li>
<li><a data-icon="fa-refresh"><span>Undo</span></a></li>
<li><a data-icon="fa-repeat"><span>Redo</span></a></li>
</ul>
</p-menu>
<button #btn type="button" pButton icon="fa fa-list">Show</button>
my, at and triggerEvent attributes provide further customization. Following menu opens at right top position of the button on mouseover event.
<p-menu [popup]="true" [trigger]="btn" my="left top" at="right top" triggerEvent="mouseover">
<ul>
<li><h3>File</h3></li>
<li><a data-icon="fa-plus"><span>New</span></a></li>
<li><a data-icon="fa-download"><span>Open</span></a></li>
<li><h3>Edit</h3></li>
<li><a data-icon="fa-refresh"><span>Undo</span></a></li>
<li><a data-icon="fa-repeat"><span>Redo</span></a></li>
</ul>
</p-menu>
<button #btn type="button" pButton icon="fa fa-list">Show</button>
Placing a h3 element instead of an anchors in a list item, defines the item as a submenu header.
<li><h3>File</h3></li>
An icon of a menuitem is defined using data-icon attribute.
<a data-icon="fa-plus"><span>New</span></a>
Name | Type | Default | Description |
---|---|---|---|
popup | boolean | false | Defines if menu would displayed as a popup. |
trigger | element | null | Trigger element to show the menu in popup mode.. |
my | string | left top | Corners of menu to align with trigger in popup mode. |
at | string | left bottom | Corners of the trigger to align with menu in popup mode. |
triggerEvent | string | click | Event to show the menu in popup mode. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-menu | 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. |
PrimeUI Menu.
<h3 class="first">Basic</h3>
<p-menu>
<ul>
<li><h3>File</h3></li>
<li><a data-icon="fa-plus"><span>New</span></a></li>
<li><a data-icon="fa-download"><span>Open</span></a></li>
<li><h3>Edit</h3></li>
<li><a data-icon="fa-refresh"><span>Undo</span></a></li>
<li><a data-icon="fa-repeat"><span>Redo</span></a></li>
</ul>
</p-menu>
<h3>Popup</h3>
<p-menu [popup]="true" [trigger]="btn">
<ul>
<li><h3>File</h3></li>
<li><a data-icon="fa-plus"><span>New</span></a></li>
<li><a data-icon="fa-download"><span>Open</span></a></li>
<li><h3>Edit</h3></li>
<li><a data-icon="fa-refresh"><span>Undo</span></a></li>
<li><a data-icon="fa-repeat"><span>Redo</span></a></li>
</ul>
</p-menu>
<button #btn type="button" pButton icon="fa fa-list">Show</button>