Menu Menu is a navigation/command component that supports dynamic and static positioning.

Basic

Popup

Import


import {MenuModule,MenuItem} from 'primeng/primeng';

MenuModel API

Menu uses the common menumodel api to define its items, visit MenuModel API for details.

Getting Started

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'}
                ];
    }
}

SubMenus

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'}
            ]
        }];
    }
}

Popup Mode

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>

Attributes

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.
appendTo any null Target element to attach the overlay, valid values are "body" or a local template variable of another element.

Methods

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.

Styling

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.

Dependencies

None.


<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'}
            ]
        }];
    }
}