import PanelMenu from 'primevue/panelmenu';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/panelmenu/panelmenu.min.js"></script>
PanelMenu uses the common MenuModel API to define the items, visit
PanelMenu requires a collection of menuitems as its model.
<PanelMenu :model="items" />
export default {
data() {
return {
items: [
{
label: 'File',
icon:'pi pi-fw pi-file',
items: [
{
label: 'New',
icon:'pi pi-fw pi-plus',
items: [
{
label: 'Bookmark',
icon:'pi pi-fw pi-bookmark'
},
{
label: 'Video',
icon:'pi pi-fw pi-video'
}
]
},
{
label: 'Delete',
icon:'pi pi-fw pi-trash'
},
{
label: 'Export',
icon:'pi pi-fw pi-external-link'
}
]
},
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Left',
icon:'pi pi-fw pi-align-left'
},
{
label: 'Right',
icon:'pi pi-fw pi-align-right'
},
{
label: 'Center',
icon:'pi pi-fw pi-align-center'
},
{
label: 'Justify',
icon:'pi pi-fw pi-align-justify'
}
]
},
{
label: 'Users',
icon:'pi pi-fw pi-user',
items: [
{
label: 'New',
icon:'pi pi-fw pi-user-plus',
},
{
label: 'Delete',
icon:'pi pi-fw pi-user-minus',
},
{
label: 'Search',
icon:'pi pi-fw pi-users',
items: [
{
label: 'Filter',
icon:'pi pi-fw pi-filter',
items: [
{
label: 'Print',
icon:'pi pi-fw pi-print'
}
]
},
{
icon:'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
label: 'Events',
icon:'pi pi-fw pi-calendar',
items: [
{
label: 'Edit',
icon:'pi pi-fw pi-pencil',
items: [
{
label: 'Save',
icon:'pi pi-fw pi-calendar-plus'
},
{
label: 'Delete',
icon:'pi pi-fw pi-calendar-minus'
}
]
},
{
label: 'Archieve',
icon:'pi pi-fw pi-calendar-times',
items: [
{
label: 'Remove',
icon:'pi pi-fw pi-calendar-minus'
}
]
}
]
}
]
}
}
}
PanelMenu offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<PanelMenu :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</PanelMenu>
nuxt-link with route configuration can also be used within templating for further customization.
<PanelMenu :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>
</PanelMenu>
If the menuitem has a key defined, PanelMenu state can be controlled programmatically with the expandedKeys property that defines the keys that are expanded. This property is a Map instance whose key is the key of a node and value is a boolean. Note that expandedKeys also supports two-way binding with the v-model directive.
Example below expands and collapses all nodes with buttons.
<div>
<Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" />
<Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
</div>
<PanelMenu :model="items" v-model:expandedKeys="expandedKeys""></PanelMenu>
export default {
data() {
return {
items: [{
key: '0',
label: 'File',
icon: 'pi pi-fw pi-file',
items: [{
key: '0_0',
label: 'New',
icon: 'pi pi-fw pi-plus',
items: [{
key: '0_0_0',
label: 'Bookmark',
icon: 'pi pi-fw pi-bookmark'
},
{
key: '0_0_1',
label: 'Video',
icon: 'pi pi-fw pi-video'
}
]
},
{
key: '0_1',
label: 'Delete',
icon: 'pi pi-fw pi-trash'
},
{
key: '0_2',
label: 'Export',
icon: 'pi pi-fw pi-external-link'
}
]
},
{
key: '1',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '1_0',
label: 'Left',
icon: 'pi pi-fw pi-align-left'
},
{
key: '1_1',
label: 'Right',
icon: 'pi pi-fw pi-align-right'
},
{
key: '1_2',
label: 'Center',
icon: 'pi pi-fw pi-align-center'
},
{
key: '1_3',
label: 'Justify',
icon: 'pi pi-fw pi-align-justify'
}
]
},
{
key: '2',
label: 'Users',
icon: 'pi pi-fw pi-user',
items: [{
key: '2_0',
label: 'New',
icon: 'pi pi-fw pi-user-plus',
},
{
key: '2_1',
label: 'Delete',
icon: 'pi pi-fw pi-user-minus',
},
{
key: '2_2',
label: 'Search',
icon: 'pi pi-fw pi-users',
items: [{
key: '2_2_0',
label: 'Filter',
icon: 'pi pi-fw pi-filter',
items: [{
key: '2_2_0_0',
label: 'Print',
icon: 'pi pi-fw pi-print'
}]
},
{
key: '2_2_1',
icon: 'pi pi-fw pi-bars',
label: 'List'
}
]
}
]
},
{
key: '3',
label: 'Events',
icon: 'pi pi-fw pi-calendar',
items: [{
key: '3_0',
label: 'Edit',
icon: 'pi pi-fw pi-pencil',
items: [{
key: '3_0_0',
label: 'Save',
icon: 'pi pi-fw pi-calendar-plus'
},
{
key: '3_0_0',
label: 'Delete',
icon: 'pi pi-fw pi-calendar-minus'
}
]
},
{
key: '3_1',
label: 'Archieve',
icon: 'pi pi-fw pi-calendar-times',
items: [{
key: '3_1_0',
label: 'Remove',
icon: 'pi pi-fw pi-calendar-minus'
}]
}
]
}
],
expandedKeys: {}
}
},
methods: {
expandAll() {
for (let node of this.items) {
this.expandNode(node);
}
this.expandedKeys = {
...this.expandedKeys
};
},
collapseAll() {
this.expandedKeys = {};
},
expandNode(node) {
if (node.items && node.items.length) {
this.expandedKeys[node.key] = true;
for (let child of node.items) {
this.expandNode(child);
}
}
}
}
}
In order to display some nodes as expanded by default, simply add their keys to the map.
export default {
data() {
return {
items: //menu model instance,
expandedKeys: {}
}
},
mounted() {
this.expandedKeys[this.items[0.key]] = true;
}
}
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. |
| expandedKeys | array | null | A map of keys to represent the expansion state in controlled mode. |
| exact | boolean | true | Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-panelmenu | Container element. |
| p-panelmenu-header | Accordion header of root submenu. |
| p-panelmenu-content | Accordion content of root submenu. |
| p-submenu-list | List element. |
| p-menuitem | Menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-panelmenu-icon | Arrow icon of an accordion header. |
None.