import ContextMenu from 'primevue/contextmenu';
ContextMenu uses the common MenuModel API to define the items, visit
ContextMenu requires a collection of menuitems as its model.
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'
},
{
separator:true
},
{
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
}
}
Setting global property attaches the context menu to the document.
<ContextMenu :global="true" :model="items" />
ContextMenu is attached to a custom element manually using the reference and calling the show(event) method.
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick">
<ContextMenu ref="menu" :model="items" />
export default {
data() {
return {
items: //items
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(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. |
| appendTo | string | null | Id of the element or "body" for document where the overlay should be appended to. |
| baseZIndex | number | 0 | Base zIndex value to use in layering. |
| autoZIndex | boolean | true | Whether to automatically manage layering. |
| global | boolean | false | Attaches the menu to document instead of a particular item. |
| Name | Parameters | Description |
|---|---|---|
| toggle | event: Browser event | Toggles the visibility of the menu. |
| show | event: Browser event | Shows the menu. |
| hide | - | Hides the menu. |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-contextmenu | Container element. |
| p-submenu-list | Submenu 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. |
None.
<img alt="logo" src="demo/images/nature/nature3.jpg" @contextmenu="onImageRightClick" aria-haspopup="true">
<ContextMenu ref="menu" :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'
},
{
separator:true
},
{
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'
}
]
}
]
},
{
separator:true
},
{
label:'Quit',
icon:'pi pi-fw pi-power-off'
}
]
}
},
methods: {
onImageRightClick(event) {
this.$refs.menu.show(event);
}
}
}