Angular Menu

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

Setup

Refer to PrimeNG setup documentation for download and installation steps for your environment.

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="pi pi-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="pi pi-list" label="Show" (click)="menu.toggle($event)"></button>

Theming

Menu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeNG Menu showcase for demos and documentation.