import {MegaMenuModule} from 'primeng/megamenu';
MegaMenu uses the common menumodel api to define its items, visit MenuModel API for details.
MegaMenu requires nested menuitems as its model where the items of a root menuitem is a two dimensional array to define columns in an overlay submenu.
<p-megaMenu [model]="items"></p-megaMenu>
export class MegaMenuDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'TV', icon: 'fa-check',
items: [
[
{
label: 'TV 1',
items: [{label: 'TV 1.1'},{label: 'TV 1.2'}]
},
{
label: 'TV 2',
items: [{label: 'TV 2.1'},{label: 'TV 2.2'}]
}
],
[
{
label: 'TV 3',
items: [{label: 'TV 3.1'},{label: 'TV 3.2'}]
},
{
label: 'TV 4',
items: [{label: 'TV 4.1'},{label: 'TV 4.2'}]
}
]
]
},
{
label: 'Sports', icon: 'fa-soccer-ball-o',
items: [
[
{
label: 'Sports 1',
items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}]
},
{
label: 'Sports 2',
items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}]
},
],
[
{
label: 'Sports 3',
items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}]
},
{
label: 'Sports 4',
items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}]
}
],
[
{
label: 'Sports 5',
items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}]
},
{
label: 'Sports 6',
items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}]
}
]
]
}
];
}
}
Custom content can be placed between p-megaMenu tags. Megamenu should be horizontal for custom content.
<p-megaMenu [model]="items">
<input type="text" pInputText placeholder="Search">
<button pButton label="Logout" icon="fa-sign-out"></button>
</p-megaMenu>
| Name | Type | Default | Description |
|---|---|---|---|
| model | array | null | An array of menuitems. |
| orientation | string | horizontal | Defines the orientation, valid values are horizontal and vertical. |
| 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. |
Following is the list of structural style classes, for theming classes visit theming page.
| Name | Element |
|---|---|
| ui-megamenu | 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. |
None.
<p-megaMenu [model]="items"></p-megaMenu>
export class MegaMenuDemo {
items: MenuItem[];
ngOnInit() {
this.items = [
{
label: 'TV', icon: 'fa-check',
items: [
[
{
label: 'TV 1',
items: [{label: 'TV 1.1'},{label: 'TV 1.2'}]
},
{
label: 'TV 2',
items: [{label: 'TV 2.1'},{label: 'TV 2.2'}]
}
],
[
{
label: 'TV 3',
items: [{label: 'TV 3.1'},{label: 'TV 3.2'}]
},
{
label: 'TV 4',
items: [{label: 'TV 4.1'},{label: 'TV 4.2'}]
}
]
]
},
{
label: 'Sports', icon: 'fa-soccer-ball-o',
items: [
[
{
label: 'Sports 1',
items: [{label: 'Sports 1.1'},{label: 'Sports 1.2'}]
},
{
label: 'Sports 2',
items: [{label: 'Sports 2.1'},{label: 'Sports 2.2'}]
},
],
[
{
label: 'Sports 3',
items: [{label: 'Sports 3.1'},{label: 'Sports 3.2'}]
},
{
label: 'Sports 4',
items: [{label: 'Sports 4.1'},{label: 'Sports 4.2'}]
}
],
[
{
label: 'Sports 5',
items: [{label: 'Sports 5.1'},{label: 'Sports 5.2'}]
},
{
label: 'Sports 6',
items: [{label: 'Sports 6.1'},{label: 'Sports 6.2'}]
}
]
]
},
{
label: 'Entertainment', icon: 'fa-child',
items: [
[
{
label: 'Entertainment 1',
items: [{label: 'Entertainment 1.1'},{label: 'Entertainment 1.2'}]
},
{
label: 'Entertainment 2',
items: [{label: 'Entertainment 2.1'},{label: 'Entertainment 2.2'}]
}
],
[
{
label: 'Entertainment 3',
items: [{label: 'Entertainment 3.1'},{label: 'Entertainment 3.2'}]
},
{
label: 'Entertainment 4',
items: [{label: 'Entertainment 4.1'},{label: 'Entertainment 4.2'}]
}
]
]
},
{
label: 'Technology', icon: 'fa-gears',
items: [
[
{
label: 'Technology 1',
items: [{label: 'Technology 1.1'},{label: 'Technology 1.2'}]
},
{
label: 'Technology 2',
items: [{label: 'Technology 2.1'},{label: 'Technology 2.2'}]
},
{
label: 'Technology 3',
items: [{label: 'Technology 3.1'},{label: 'Technology 3.2'}]
}
],
[
{
label: 'Technology 4',
items: [{label: 'Technology 4.1'},{label: 'Technology 4.2'}]
}
]
]
}
];
}
}