Vue3 TabMenu

Vue3 TabMenu is a navigation component that displays items as tab headers. Example below uses nested routes with TabMenu. 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 TabMenu from 'primevue/tabmenu';

MenuModel

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

Getting Started

TabMenu is integrated with Vue Router and requires a collection of menuitems as its model.

<TabMenu :model="items" />
<router-view />

export default {
    data() {
        return {
            items: [
                {label: 'Home', icon: 'pi pi-fw pi-home', to: '/tabmenu'},
                {label: 'Calendar', icon: 'pi pi-fw pi-calendar', to: '/tabmenu/calendar'},
                {label: 'Edit', icon: 'pi pi-fw pi-pencil', to: '/tabmenu/edit'},
                {label: 'Documentation', icon: 'pi pi-fw pi-file', to: '/tabmenu/documentation'},
                {label: 'Settings', icon: 'pi pi-fw pi-cog', to: '/tabmenu/settings'}
            ]
        }
    }
}

Theming

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

Resources

Visit the PrimeVue TabMenu showcase for demos and documentation.