MenuModel API PrimeNG 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,MenuItem} from 'primeng/primeng';


export class MenuDemo {
    
    private items: MenuItem[];

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

MenuItem provides the following properties.

Name Type Default Description
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.
items array null An array of children menuitems.
expanded boolean false Visibility of submenu.

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-plus': command: (event) => {
                    //process event
                }}
            ]
        }
    }
}

Navigation

Navigation is specified using url property for external links and with routerLink for internal ones.


export class MenuDemo {
    
    private items: MenuItem[];

    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'fa-plus', url: 'http://www.primefaces.org/primeng'},
                {label: 'Open', icon: 'fa-download', routerLink: ['/pagename']}
            ]
        }
    }
}