Menu - MenuModel - 《PrimeNG Document》

MenuItem
- Command
- Navigation

MenuModel APIPrimeNG menus components share a common api to specify the menuitems and submenus.

MenuItem

Core of the api is MenuItem class that defines various options such as the label, icon and children of an item in a menu. Example below is a sample configuration with Menu component.


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


import {MenuModule} from 'primeng/menu';
import {MenuItem} from 'primeng/api';


export class MenuDemo {
    private items: MenuItem[];
    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa fa-plus'},
                {label: 'Open', icon: 'fa fa-download'}
            ]
        },
        {
            label: 'Edit',
            items: [
                {label: 'Undo', icon: 'fa fa-refresh'},
                {label: 'Redo', icon: 'fa fa-repeat'}
            ]
        }];
    }
}

MenuItem provides the following properties. Note that not all of them may be utilized by the menu component.

Name	Type	Default	Description
id	string	null	Identifier of the element.
label	string	null	Text of the item.
icon	string	null	Icon of the item.
command	function	null	Callback to execute when item is clicked.
url	string	null	External link to navigate when item is clicked.
routerLink	array	null	RouterLink definition for internal navigation.
routerLinkActiveOptions	object	null	Configuration for active router link.
queryParams	object	null	Query parameters for internal navigation via routerLink.
items	array	null	An array of children menuitems.
expanded	boolean	false	Visibility of submenu.
disabled	boolean	false	When set as true, disables the menuitem.
visible	boolean	true	Whether the dom element of menuitem is created or not.
target	string	null	Specifies where to open the linked document.
separator	boolean	false	Defines the item as a separator.
style	object	null	Inline style of the menuitem.
styleClass	string	null	Style class of the menuitem.
badge	string	null	Value of the badge.
badgeStyleClass	string	null	Style class of the badge.
title	string	null	Tooltip text of the item.
automationId	any	null	Value of HTML data-* attribute.

Command

The function to invoke when an item is clicked is defined using the command property.


export class MenuDemo {
    private items: MenuItem[];
    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa fa-plus', command: (event) => {
                    //event.originalEvent: Browser event
                    //event.item: menuitem metadata
                }}
            ]
        }
    }
}

Navigation is specified using url property for external links and with routerLink for internal ones. If a menuitem has an active route, ui-state-active style class is added as an indicator. Active route link can be configured with routerLinkActiveOptions property of MenuItem API.


export class MenuDemo {
    private items: MenuItem[];
    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa fa-plus', url: 'http://www.primefaces.org/primeng'},
                {label: 'Open', icon: 'fa fa-download', routerLink: ['/pagename']}
                {label: 'Recent Files', icon: 'fa fa-download', routerLink: ['/pagename'], queryParams: {'recent': 'true'}}
            ]
        }
    }
}