DEV Community

loading...
Cover image for Angular Menu

Angular Menu

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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'}
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

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'}
            ]
        }];
    }
}
Enter fullscreen mode Exit fullscreen mode

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

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide