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);
}
Two slots named "start" and "end" are provided to embed content before or after the menu. In additon Menu, offers item customization with the item template that receives the menuitem instance from the model as a parameter.
<Menu :model="items">
<template #start>
Start
</template>
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
<template #end>
End
</template>
</Menu>
router-link with route configuration can also be used within templating for further customization.
<Menu :model="items">
<template #item="{item}">
<router-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>
</router-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 'router-link-active-exact' class if route exactly matches the item path. |
| tabindex | number | 0 | Index of the element in tabbing order. |
| aria-label | string | null | Defines a string value that labels an interactive element. |
| aria-labelledby | string | null | Establishes relationships between the component and label(s) where its value should be one or more element IDs. |
| Name | Parameters | Description |
|---|---|---|
| show | - | Callback to invoke when the overlay is shown. |
| hide | - | Callback to invoke when the overlay is hidden. |
| focus | event | Callback to invoke when the component receives focus. |
| blur | event | Callback to invoke when the component loses focus. |
| 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 |
| start | - |
| end | - |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-menu | Container element. |
| p-menu-start | Container of the start slot. |
| p-menu-end | Container of the end slot. |
| p-menu-list | List element. |
| p-submenu-header | Header of the submenu list element. |
| p-menuitem | Menuitem element. |
| p-menuitem-active | Active menuitem element. |
| p-menuitem-content | Content of menuitem. |
| p-menuitem-link | Link element of the menuitem. |
| p-menuitem-text | Label of a menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
Menu component uses the menu role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.
In popup mode, the component implicitly manages the aria-expanded, aria-haspopup and aria-controls attributes of the target element to define the relation between the target and the popup.
| Key | Function |
|---|---|
| tab | Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the next focusable item in the page tab sequence. |
| shift + tab | Add focus to the first item if focus moves in to the menu. If the focus is already within the menu, focus moves to the previous focusable item in the page tab sequence. |
| enter | Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. |
| space | Activates the focused menuitem. If menu is in overlay mode, popup gets closes and focus moves to target. |
| escape | If menu is in overlay mode, popup gets closes and focus moves to target. |
| down arrow | Moves focus to the next menuitem. |
| up arrow | Moves focus to the previous menuitem. |
| alt + up arrow | If menu is in overlay mode, popup gets closes and focus moves to the target. |
| home | Moves focus to the first menuitem. |
| end | Moves focus to the last menuitem. |
None.