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. |
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) => {
//event.originalEvent: Browser event
//event.item: menuitem metadata
}}
]
}
}
}
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']}
]
}
}
}