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

Basic

Popup

Import


import {MenuModule} from 'primeng/menu';
import {MenuItem} from 'primeng/api';

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 {
    
    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 {
    
    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>

Properties

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 ng-template variable of another element.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.

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.

View on GitHub


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