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 index: Index of the 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-menuitem-link | Link element of the menuitem. |
| p-menuitem-icon | Icon of a menuitem. |
| p-menuitem-text | Text of a menuitem. |
TabMenu component uses the menubar role and the value to describe the menu can either be provided with aria-labelledby or aria-label props. Each list item has a presentation role whereas anchor elements have a menuitem role with aria-label referring to the label of the item and aria-disabled defined if the item is disabled.
| Key | Function |
|---|---|
| tab | Adds focus to the active tab header when focus moves in to the component, if there is already a focused tab header moves the focus out of the component based on the page tab sequence. |
| enter | Activates the focused tab header. |
| space | Activates the focused tab header. |
| right arrow | Moves focus to the next header. |
| left arrow | Moves focus to the previous header. |
| home | Moves focus to the first header. |
| end | Moves focus to the last header. |
None.