DEV Community

loading...
Cover image for Angular Menubar

Angular Menubar

primetek profile image PrimeTek ・1 min read

Angular Menubar is a horizontal menu component.

Setup

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

Import

import {MenubarModule} from 'primeng/menubar';
import {MenuItem} from 'primeng/api';
Enter fullscreen mode Exit fullscreen mode

MenuModel API

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

Getting Started

Menubar requires nested menuitems as its model.

<p-menubar [model]="items"></p-menubar>
Enter fullscreen mode Exit fullscreen mode
export class MenubarDemo {

    items: MenuItem[];

    ngOnInit() {
        this.items = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'pi pi-fw pi-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'pi pi-fw pi-pencil',
                items: [
                    {label: 'Delete', icon: 'pi pi-fw pi-trash'},
                    {label: 'Refresh', icon: 'pi pi-fw pi-refresh'}
                ]
            }
        ];
    }
}
Enter fullscreen mode Exit fullscreen mode

Custom Content

Custom content can be placed between p-menubar tags.

<p-menubar [model]="items">
    <input type="text" pInputText placeholder="Search">
    <button pButton label="Logout" icon="pi pi-power-off"></button>
</p-menubar>
Enter fullscreen mode Exit fullscreen mode

Theming

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

Resources

Visit the PrimeNG Menubar showcase for demos and documentation.

Discussion (0)

pic
Editor guide