import Menu from 'primevue/menu';
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);
}
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. |
| Name | Parameters | Description |
|---|---|---|
| toggle | event: Browser event | Toggles the visibility of the overlay. |
| show | event: Browser event target: Optional target if event.target would not be used |
Shows the overlay. |
| hide | - | Hides the overlay. |
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.
<h3>Inline</h3>
<Menu :model="items" />
<h3>Overlay</h3>
<Button type="button" label="Toggle" @click="toggle" aria-haspopup="true" aria-controls="overlay_menu" />
<Menu id="overlay_menu" ref="menu" :model="items" :popup="true" />
export default {
data() {
return {
items: [
{
label: 'Options',
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: 'Navigate',
items: [{
label: 'Vue Website',
icon: 'pi pi-external-link',
url: 'https://vuejs.org/'
},
{
label: 'Router',
icon: 'pi pi-upload',
to: '/fileupload'
}
]}
]
}
},
methods: {
toggle(event) {
this.$refs.menu.toggle(event);
},
save() {
this.$toast.add({severity: 'success', summary: 'Success', detail: 'Data Saved', life: 3000});
}
}
}