Angular TieredMenu

Angular TieredMenu displays submenus in nested overlays.

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

Import

import {TieredMenuModule} from 'primeng/tieredmenu';
import {MenuItem} from 'primeng/api';

MenuModel API

TieredMenu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

TieredMenu requires nested menuitems as its model.

<p-tieredMenu [model]="items"></p-tieredMenu>

export class TieredMenuDemo {

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            }
        ];
    }
}

Popup Mode

Menu is inline by default, popup mode is also supported by enabling popup property and calling toggle method by passing the event from the anchor element.

<p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
<button #btn type="button" pButton icon="pi pi-fw pi-list" label="Show" (click)="menu.toggle($event)"></button>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.

<p-tieredMenu [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" #menu [model]="items" [popup]="true"></p-tieredMenu>
<button #btn type="button" pButton icon="pi pi-fw pi-list" label="Show" (click)="menu.toggle($event)"></button>

Theming

TieredMenu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG TieredMenu showcase for demos and documentation.