Vue3 Menu

Vue3 Menu is a navigation / command component that supports dynamic and static positioning. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import Menu from 'primevue/menu';

MenuModel

Menu uses the common MenuModel API to define the items, visit MenuModel API for details.

Getting Started

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'
                }
            ]
        }
    }
}

SubMenus

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);
}

Theming

Menu supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue Menu showcase for demos and documentation.