DEV Community

Cover image for Angular Menubar

Angular Menubar

primetek profile image PrimeTek ・1 min read

Angular Menubar is a horizontal menu component.


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


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


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


Visit the PrimeNG Menubar showcase for demos and documentation.

Discussion (0)

Editor guide