import {Menu,MenuItem} from 'primeng/primeng';
Menu uses the common menumodel api to define its items, visit MenuModel API for details.
Menu requires a collection of menuitems as its model.
<p-menu [model]="items"></p-menu>
export class MenuDemo {
private items: MenuItem[];
ngOnInit() {
this.items = [
{label: 'New', icon: 'fa-plus'},
{label: 'Open', icon: 'fa-download'},
{label: 'Undo', icon: 'fa-refresh'}
];
}
}
Menu supports 1 level of nesting via subitems of an item.
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'}
]
}];
}
}
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-menu #menu popup="popup" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
popup | boolean | false | Defines if menu would displayed as a popup. |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
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. |
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-menu | 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. |
Native component that requires the css of PrimeUI Menu.
<h3 class="first">Basic</h3>
<p-menu [model]="items"></p-menu>
<h3>Popup</h3>
<p-menu #menu popup="popup" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-list" label="Show" (click)="menu.toggle($event)"></button>
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'}
]
}];
}
}