import MegaMenu from 'primevue/megamenu';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/megamenu/megamenu.min.js"></script>
MegaMenu uses the common MenuModel API to define the items of the model, visit
<MegaMenu :model="items" />
export default {
data() {
return {
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: 'Setting 4',
items: [{label: 'Setting 4.1'}, {label: 'Setting 4.2'}]
}
]
]
}
]
}
}
}
Default orientation is "horizontal" with "vertical" as the alternative.
<MegaMenu :model="items" orientation="vertical" />
Two slots named "start" and "end" are provided to embed content before or after the items. In additon MegaMenu, offers item customization with the item template that receives the menuitem instance from the model as a parameter.
<MegaMenu :model="items">
<template #start>
Before
</template>
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
<template #end>
After
</template>
</MegaMenu>
nuxt-link with route configuration can also be used within templating for further customization.
<MegaMenu :model="items">
<template #item="{item}">
<nuxt-link :to="item.to" custom v-slot="{href, route, navigate, isActive, isExactActive}">
<a :href="href" @click="navigate" :class="{'active-link': isActive, 'active-link-exact': isExactActive}">{{route.fullPath}}</a>
</nuxt-link>
</template>
</MegaMenu>
Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.
| Name | Type | Default | Description |
|---|---|---|---|
| model | array | null | An array of menuitems. |
| orientation | string | horizontal | Defines the orientation, valid values are horizontal and vertical. |
| exact | boolean | true | Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
| start | - |
| end | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-megamenu | Container element. |
| p-megamenu-horizontal | Container element in horizontal orientation. |
| p-megamenu-vertical | Container element in vertical orientation. |
| p-megamenu-root-list | Root list element. |
| p-megamenu-panel | Submenu container. |
| p-megamenu-submenu | Submenu list element. |
| p-menuitem | Menuitem element. |
| p-menuitem-active | Active menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-submenu-icon | Arrow icon of a submenu. |
| p-megamenu-custom | Container of the default slot. |
None.