DEV Community

loading...
Cover image for Vue3 Menu

Vue3 Menu

primetek profile image PrimeTek ・2 min read

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';
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode
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'
                }
            ]
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

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'} ]
    }
];
Enter fullscreen mode Exit fullscreen mode

Popup Mode

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" />
Enter fullscreen mode Exit fullscreen mode
toggle(event) {
    this.$refs.menu.toggle(event);
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide