import Menu from 'primevue/menu';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
Menu uses the common MenuModel API to define the items, visit
Menu requires a collection of menuitems as its model.
<Menu :model="items" />
export default {
data() {
return {
items: [
{
label: 'Update',
icon: 'pi pi-refresh',
command: () => {
this.$toast.add({severity:'success', summary:'Updated', detail:'Data Updated', life: 3000});
}
},
{
label: 'Delete',
icon: 'pi pi-times',
command: () => {
this.$toast.add({ severity: 'warn', summary: 'Delete', detail: 'Data Deleted', life: 3000});
}
},
{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]
}
}
}
Menu supports one level of nesting via subitems of an item.
const items: [
{
label: 'Options',
items: [{label: 'New', icon: 'pi pi-fw pi-plus', command:() => {} },
{label: 'Delete', icon: 'pi pi-fw pi-trash', url: 'https://www.primetek.com.tr'}]
},
{
label: 'Account',
items: [{label: 'Options', icon: 'pi pi-fw pi-cog', to: '/options'},
{label: 'Sign Out', icon: 'pi pi-fw pi-power-off', to: '/logout'} ]
}
];
Menu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.
<Button type="button" label="Toggle" @click="toggle" />
<Menu ref="menu" :model="items" :popup="true" />
toggle(event) {
this.$refs.menu.toggle(event);
}
Menu offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<Menu :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</Menu>
nuxt-link with route configuration can also be used within templating for further customization.
<Menu :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>
</Menu>
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. |
| popup | boolean | false | Defines if menu would displayed as a popup. |
| appendTo | string | body | A valid query selector or an HTMLElement to specify where the overlay gets attached. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| exact | boolean | true | Whether to apply 'nuxt-link-active-exact' class if route exactly matches the item path. |
| Name | Parameters | Description |
|---|---|---|
| show | - | Callback to invoke when the overlay is shown. |
| hide | - | Callback to invoke when the overlay is hidden. |
| Name | Parameters | Description |
|---|---|---|
| toggle | event: Browser event | Toggles the visibility of the overlay. |
| show | event: Browser event | Shows the overlay. |
| hide | - | Hides the overlay. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-menu | Container element. |
| p-menu-list | List element. |
| p-menuitem | Menuitem element. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
None.