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 {Menu,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 any null External link or a router link to navigate when item is clicked.
items array null An array of children menuitems.

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

The link to navigate is specified with url property that can either be an external url or an internal router link.


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', url: ['PageName']}
            ]
        }
    }
}