MegaMenu MegaMenu displays submenus of root items together.

Default

Vertical

Import


import {MegaMenu} from 'primeng/primeng';

MenuModel API

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

Getting Started

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 {

        private 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'}]
                            }
                        ]
                    ]
                }
            ];
        }
    }

Attributes

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.

Styling

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.

Dependencies

Native component that requires the css of PrimeUI MegaMenu.


<p-megaMenu [model]="items"></p-megaMenu>


export class MegaMenuDemo {

    private 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'}]
                        }  
                    ]
                ]
            }
        ];
    }
}