The TieredMenu component displays the sub-menus in a nested Overlays mode. By default, the slide menu is displayed as an inline menu component. A basic tiered menu example, which displays the document or file type menu would be as follows:
<p-tieredMenu [model]="items"></p-tieredMenu>
The list of menu items needs to be organized with in a component class. For example, a root menu item titled File will have nested items as shown here:
this.items = [
{
label: 'File',
icon: 'fa-file-o',
items: [
{
label: 'New',
icon: 'fa-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{label: 'Quit'}
},
// more items
]
The following screenshot shows a snapshot result of the basic tiered menu example:
As seen in the preceding snapshot, the slide menu is displayed in an inline format. It will be displayed in pop-up mode by enabling the popup property. PrimeNG 4.1 introduced the appendTo property to attach the Overlay. The slide menu is accessed using the API methods such as toggle, show, and hide.
The main difference between slide menu and tiered menu components is that a slide menu displays the sub-menu by replacing the parent menu whereas a tiered menu displays the sub-menus in an Overlay mode. The API methods for both a slide menu and tiered menu with more details in a tabular format is explained in menu section Table 2.0.
https://github.com/ova2/angular-development-with-primeng/tree/master/chapter7/tieredmenu.