MegaMenu

MegaMenu is navigation component that displays submenus together.

Horizontal

Vertical

Templating

Import via Module


import { MegaMenu } from 'primereact/megamenu';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/megamenu/megamenu.min.js"></script>

MenuItem API

MegaMenu uses the common menu item api to define its items, visit MenuModel for details.

MegaMenu requires a collection of menuitems as its model.


const items = [
    {
        label: 'Videos', icon: 'pi pi-fw pi-video',
        items: [
            [
                {
                    label: 'Video 1',
                    items: [{label: 'Video 1.1'}, {label: 'Video 1.2'}]
                },
                {
                    label: 'Video 2',
                    items: [{label: 'Video 2.1'}, {label: 'Video 2.2'}]
                }
            ],
            [
                {
                    label: 'Video 3',
                    items: [{label: 'Video 3.1'}, {label: 'Video 3.2'}]
                },
                {
                    label: 'Video 4',
                    items: [{label: 'Video 4.1'}, {label: 'Video 4.2'}]
                }
            ]
        ]
    },
    {
        label: 'Users', icon: 'pi pi-fw pi-users',
        items: [
            [
                {
                    label: 'User 1',
                    items: [{label: 'User 1.1'}, {label: 'User 1.2'}]
                },
                {
                    label: 'User 2',
                    items: [{label: 'User 2.1'}, {label: 'User 2.2'}]
                },
            ],
            [
                {
                    label: 'User 3',
                    items: [{label: 'User 3.1'}, {label: 'User 3.2'}]
                },
                {
                    label: 'User 4',
                    items: [{label: 'User 4.1'}, {label: 'User 4.2'}]
                }
            ],
            [
                {
                    label: 'User 5',
                    items: [{label: 'User 5.1'}, {label: 'User 5.2'}]
                },
                {
                    label: 'User 6',
                    items: [{label: 'User 6.1'}, {label: 'User 6.2'}]
                }
            ]
        ]
    },
    {
        label: 'Events', icon: 'pi pi-fw pi-calendar',
        items: [
            [
                {
                    label: 'Event 1',
                    items: [{label: 'Event 1.1'}, {label: 'Event 1.2'}]
                },
                {
                    label: 'Event 2',
                    items: [{label: 'Event 2.1'}, {label: 'Event 2.2'}]
                }
            ],
            [
                {
                    label: 'Event 3',
                    items: [{label: 'Event 3.1'}, {label: 'Event 3.2'}]
                },
                {
                    label: 'Event 4',
                    items: [{label: 'Event 4.1'}, {label: 'Event 4.2'}]
                }
            ]
        ]
    },
    {
        label: 'Settings', icon: 'pi pi-fw pi-cog',
        items: [
            [
                {
                    label: 'Setting 1',
                    items: [{label: 'Setting 1.1'}, {label: 'Setting 1.2'}]
                },
                {
                    label: 'Setting 2',
                    items: [{label: 'Setting 2.1'}, {label: 'Setting 2.2'}]
                },
                {
                    label: 'Setting 3',
                    items: [{label: 'Setting 3.1'}, {label: 'Setting 3.2'}]
                }
            ],
            [
                {
                    label: 'Technology 4',
                    items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
                }
            ]
        ]
    }
]


<MegaMenu model={items} />

Orientation

Default orientation is "horizontal" with "vertical" as the alternative.


<MegaMenu model={items} orientation="vertical"/>

Custom Content

The megamenu can display custom content by using the "start" and "end" properties.


<MegaMenu
  model={items}
  start={<InputText placeholder="Search" type="text"/>}
  end={<Button label="Logout" icon="pi pi-power-off"/>}
/>

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
model	array	null	An array of menuitems.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.
orientation	string	horizontal	Defines the orientation, valid values are horizontal and vertical.
start	any	null	The template of starting element.
end	any	null	The template of trailing element

Styling

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-megamenu	Container element.
p-megamenu-root-list	List element.
p-menuitem	Menuitem element.
p-menuitem-text	Label of a menuitem.
p-menuitem-icon	Icon of a menuitem.
p-submenu-icon	Arrow icon of a submenu.