import TabMenu from 'primevue/tabmenu';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/tabmenu/tabmenu.min.js"></script>
TabMenu uses the common MenuModel API to define the items, visit
TabMenu requires a collection of menuitems as its model.
<TabMenu :model="items" />
export default {
data() {
return {
items: [
{label: 'Home', icon: 'pi pi-fw pi-home'},
{label: 'Calendar', icon: 'pi pi-fw pi-calendar'},
{label: 'Edit', icon: 'pi pi-fw pi-pencil'},
{label: 'Documentation', icon: 'pi pi-fw pi-file'},
{label: 'Settings', icon: 'pi pi-fw pi-cog'}
]
}
}
}
TabMenu can be also integrated with Vue Router.
<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'}
]
}
}
}
Visibility of the content is specified with the activeIndex property that supports one or two-way binding.
<TabMenu :model="items" :activeIndex="activeIndex" />
Two-way binding requires v-model.
<TabMenu :model="items" v-model:activeIndex="activeIndex" />
TabMenu offers content customization with the item template that receives the menuitem instance from the model as a parameter.
<TabMenu :model="items">
<template #item="{item}">
<a :href="item.url">{{item.label}}</a>
</template>
</TabMenu>
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. |
| exact | boolean | true | Defines if active route highlight should match the exact route path. |
| activeIndex | number | 0 | Active index of menuitem. |
| Name | Parameters | Description |
|---|---|---|
| tab-change |
event.originalEvent: Browser event event.index: Index of the selected tab |
Callback to invoke when an active tab is changed. |
| Name | Parameters |
|---|---|
| item | item: Menuitem instance |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-tabmenu | Container element. |
| p-tabmenu-nav | List element. |
| p-tabmenuitem | Menuitem element. |
| p-highlight | Active menuitem element. |
| p-menuitem-icon | Icon of a menuitem. |
| p-menuitem-text | Text of a menuitem. |
None.