import {SlideMenu} from 'primeng/primeng';
SlideMenu requires nested list elements.
<p-slideMenu>
<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-slideMenu>
SlideMenu is inline by default, popup mode is also supported by enabling popup property and defining a trigger element.
<p-slideMenu [popup]="true" [trigger]="btn">
<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-slideMenu>
<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-slideMenu [popup]="true" [trigger]="btn" my="left top" at="right top" triggerEvent="mouseover">
<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-slideMenu>
<button #btn type="button" pButton icon="fa fa-list">Show</button>
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. |
backLabel | string | Back | Label of element to navigate back. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-slidemenu | Container element. |
ui-slidemenu-wrapper | Wrapper of content. |
ui-slidemenu-content | Content element. |
ui-slidemenu-backward | Element to navigate to previous menu on click. |
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 SlideMenu.
Default
<h3 class="first">Default</h3>
<p-slideMenu>
<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-slideMenu>
<h3>Popup</h3>
<p-slideMenu [popup]="true" [trigger]="btn">
<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-slideMenu>
<button #btn type="button" pButton icon="fa fa-list">Show</button>