Tiered Menu TieredMenu displays submenus in nested overlays.

Default

Click to Display

Popup

Import


import {TieredMenu} from 'primeng/primeng';

Getting Started

TieredMenu requires nested list elements.


<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>

Popup Mode

TieredMenu is inline by default, popup mode is also supported by enabling popup property and defining a trigger element.


<p-tieredMenu [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-tieredMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show"></button>

my, at and triggerEvent attributes provide further customization. Following menu opens at right top position of the button on mouseover event.


<p-tieredMenu [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-tieredMenu>
<button #btn type="button" pButton icon="fa fa-list" label="Show"></button>

AutoDisplay

TieredMenu submenus are displayed on hover by default, enable autoDisplay property to require a click to open a submenu initially. In this mode, until outside of tieredMenu is clicked, menu goes in activated mode and submenus can be displayed using mouseover.

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
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.
autoDisplay boolean false Displays submenus with mouseover, set to false to require a click to activate the menu.

Styling

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

Name Element
ui-tieredmenu 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-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> <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-tieredMenu> <h3>Click to Display</h3> <p-tieredMenu [autoDisplay]="false"> <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-tieredMenu> <h3>Popup</h3> <p-tieredMenu [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-tieredMenu> <button #btn type="button" pButton icon="fa fa-list" label="Show"></button>