MenubarMenubar is an horizontal menu components with support for nested submenus.
Documentation
Import
import {MenubarModule} from 'primeng/menubar';
import {MenuItem} from 'primeng/api';
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>
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'}
]
}
];
}
}
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="fa fa-sign-out"></button>
</p-menubar>
Properties
Name | Type | Default | Description |
---|---|---|---|
model | array | null | An array of menuitems. |
autoDisplay | boolean | true | Display menu item when mouse enter or display menu item when clicked |
style | string | null | Inline style of the component. |
styleClass | string | null | Style class of the component. |
baseZIndex | number | 0 | Base zIndex value to use in layering. |
autoZIndex | boolean | true | Whether to automatically manage layering. |
Styling
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-menubar | 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. |
ui-submenu-icon | Arrow icon of a submenu. |
Dependencies
None.
Source
<p-menubar [model]="items">
<div>
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa fa-sign-out" style="margin-left:.25em"></button>
</div>
</p-menubar>
<p-menubar [model]="items" [autoDisplay]="false">
<div>
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa fa-sign-out" style="margin-left:.25em"></button>
</div>
</p-menubar>
export class MenubarDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'File',
icon: 'pi pi-fw pi-file',
items: [{
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [
{label: 'Project'},
{label: 'Other'},
]
},
{label: 'Open'},
{separator:true},
{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'}
]
},
{
label: 'Help',
icon: 'pi pi-fw pi-question',
items: [
{
label: 'Contents'
},
{
label: 'Search',
icon: 'pi pi-fw pi-search',
items: [
{
label: 'Text',
items: [
{
label: 'Workspace'
}
]
},
{
label: 'File'
}
]}
]
},
{
label: 'Actions',
icon: 'pi pi-fw pi-cog',
items: [
{
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [
{label: 'Save', icon: 'pi pi-fw pi-save'},
{label: 'Update', icon: 'pi pi-fw pi-save'},
]
},
{
label: 'Other',
icon: 'pi pi-fw pi-tags',
items: [
{label: 'Delete', icon: 'pi pi-fw pi-minus'}
]
}
]
},
{separator:true},
{
label: 'Quit', icon: 'pi pi-fw pi-times'
}
];
}
}