Menu - TieredMenu - 《PrimeNG Document》

Documentation
Source

Tiered MenuTieredMenu displays submenus in nested overlays.

Documentation

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'}
                ]
            }
        ];
    }
}

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="fa fa fa-fw fa-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="fa fa fa-fw fa-list" label="Show" (click)="menu.toggle($event)"></button>

Properties

Name	Type	Default	Description
model	array	null	An array of menuitems.
popup	boolean	false	Defines if menu would displayed as a popup.
appendTo	any	null	Target element to attach the overlay, valid values are "body" or a local ng-template variable of another element.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
hideDelay	number	250	Delay in milliseconds to hide the menu on mouse leave.
showTransitionOptions	string	225ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	195ms ease-in	Transition options of the hide animation.

Methods

Name	Parameters	Description
toggle	event: browser event	Toggles the visibility of the popup menu.
show	event: browser event	Displays the popup menu.
hide	-	Hides the popup 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

None.

Source

View on GitHub


<h3 class="first">Default</h3>
<p-tieredMenu [model]="items"></p-tieredMenu>
<h3>Popup</h3>
<p-tieredMenu #menu [model]="items" [popup]="true"></p-tieredMenu>
<button #btn type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>


export class TieredMenuDemo {
    items: MenuItem[];
    ngOnInit() {
        this.items = [
            {
                label: 'File',
                icon: 'pi pi-fw pi-file',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {separator:true},
                    {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'}
                ]
            },
            {
                label: 'Help',
                icon: 'pi pi-fw pi-question',
                items: [
                    {
                        label: 'Contents'
                    },
                    {
                        label: 'Search', 
                        icon: 'pi pi-fw pi-search', 
                        items: [
                            {
                                label: 'Text', 
                                items: [
                                    {
                                        label: 'Workspace'
                                    }
                                ]
                            },
                            {
                                label: 'File'
                            }
                    ]}
                ]
            },
            {
                label: 'Actions',
                icon: 'pi pi-fw pi-cog',
                items: [
                    {
                        label: 'Edit',
                        icon: 'pi pi-fw pi-pencil',
                        items: [
                            {label: 'Save', icon: 'pi pi-fw pi-save'},
                            {label: 'Update', icon: 'pi pi-fw pi-save'},
                        ]
                    },
                    {
                        label: 'Other',
                        icon: 'pi pi-fw pi-tags',
                        items: [
                            {label: 'Delete', icon: 'pi pi-fw pi-minus'}
                        ]
                    }
                ]
            },
            {separator:true},
            {
                label: 'Quit', icon: 'pi pi-fw pi-times'
            }
        ];
    }
}

TieredMenu