Menu

Documentation
Source

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

Documentation

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: 'pi pi-fw pi-plus'},
            {label: 'Open', icon: 'pi pi-fw pi-download'},
            {label: 'Undo', icon: 'pi pi-fw pi-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: 'pi pi-fw pi-plus'},
                {label: 'Download', icon: 'pi pi-fw pi-download'}
            ]
        },
        {
            label: 'Edit',
            items: [
                {label: 'Add User', icon: 'pi pi-fw pi-user-plus'},
                {label: 'Remove User', icon: 'pi pi-fw pi-user-minus'}
            ]
        }];
    }
}

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]="true" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-fw fa-list" label="Show" (click)="menu.toggle($event)"></button>

Animation Configuration

Transition of the open and hide animations can be customized using the showTransitionOptions and hideTransitionOptions properties, example below disables the animations altogether.


<p-menu [showTransitionOptions]="'0ms'" [hideTransitionOptions]="'0ms'" #menu [popup]="true" [model]="items"></p-menu>
<button type="button" pButton icon="fa fa-fw 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.
showTransitionOptions	string	225ms ease-out	Transition options of the show animation.
hideTransitionOptions	string	195ms ease-in	Transition options of the hide animation.

Events

Name	Parameters	Description
onShow	event: Event object	Callback to invoke when overlay menu is shown.
onHide	event: Event object	Callback to invoke when overlay menu is hidden.

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.

Source

View on GitHub


<h3 class="first">Basic</h3>
<p-menu [model]="items"></p-menu>
<h3>Popup</h3>
<p-menu #menu [popup]="true" [model]="items"></p-menu>
<button type="button" pButton icon="pi pi-bars" label="Show" (click)="menu.toggle($event)"></button>


export class MenuDemo {
    items: MenuItem[];
    ngOnInit() {
        this.items = [{
            label: 'File',
            items: [
                {label: 'New', icon: 'pi pi-fw pi-plus'},
                {label: 'Download', icon: 'pi pi-fw pi-download'}
            ]
        },
        {
            label: 'Edit',
            items: [
                {label: 'Add User', icon: 'pi pi-fw pi-user-plus'},
                {label: 'Remove User', icon: 'pi pi-fw pi-user-minus'}
            ]
        }];
    }
}