V3 has reached EOL, Upgrade to PrimeVue 4

TabMenu

TabMenu is a navigation component displaying menu items as tabs.

Import #


import TabMenu from 'primevue/tabmenu';

Basic #

TabMenu requires a collection of menuitems as its model.


<TabMenu :model="items" />

Controlled #

Tabs can be controlled programmatically using activeIndex property.


<div class="flex mb-2 gap-2 justify-content-end">
    <Button @click="active = 0" rounded label="1" class="w-2rem h-2rem p-0" :outlined="active !== 0" />
    <Button @click="active = 1" rounded label="2" class="w-2rem h-2rem p-0" :outlined="active !== 1" />
    <Button @click="active = 2" rounded label="3" class="w-2rem h-2rem p-0" :outlined="active !== 2" />
</div>

<TabMenu v-model:activeIndex="active" :model="items" />

Template #

TabMenu offers item customization with the item template that receives the menuitem instance from the model as a parameter.


<TabMenu :model="items">
    <template #item="{ item, props }">
        <a v-ripple v-bind="props.action" class="flex align-items-center gap-2">
            <img :alt="item.name" :src="`/images/avatar/${item.image}`" style="width: 32px" />
            <span class="font-bold">{{ item.name }}</span>
        </a>
    </template>
</TabMenu>

Command #

The command property defines the callback to run when an item is activated by click or a key event.


<TabMenu :model="items" />
<Toast />

Router #

Items with navigation are defined with templating to be able to use a router link component, an external link or programmatic navigation.


<TabMenu :model="items">
    <template #item="{ item, props }">
        <router-link v-if="item.route" v-slot="{ href, navigate }" :to="item.route" custom>
            <a v-ripple :href="href" v-bind="props.action" @click="navigate">
                <span v-bind="props.icon" />
                <span v-bind="props.label">{{ item.label }}</span>
            </a>
        </router-link>
        <a v-else v-ripple :href="item.url" :target="item.target" v-bind="props.action">
            <span v-bind="props.icon" />
            <span v-bind="props.label">{{ item.label }}</span>
        </a>
    </template>
</TabMenu>

Accessibility #

Screen Reader

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.

Keyboard Support

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.

name	type	default	description
model	MenuItem[]	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.
ariaLabel	string	null	Defines a string value that labels an interactive element.
ariaLabelledby	string	null	Identifier of the underlying input element.
pt	PassThrough<TabMenuPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
item	scope: { item: MenuItem, // Menuitem instance index: number, // Index of the menuitem active: boolean, // Current active state of the menuitem label: undefined, // Label property of the menuitem props: TabMenuRouterBindProps, // Binding properties of the menuitem }	VNode<RendererNode, RendererElement, Object>[]	Custom content for each item.
itemicon	scope: { item: MenuItem, // Menuitem instance class: any, // Style class of the item icon element. }	VNode<RendererNode, RendererElement, Object>[]	Custom item icon template.

name	type	description
originalEvent	Event	Browser event
index	number	Index of the selected tab

name	type	default	description
instance	any	null	Defines instance.
props	TabMenuProps	null	Defines valid properties.
state	TabMenuState	null	Defines current inline state.
context	TabMenuContext	null	Defines current options.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	TabMenuPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
menu	TabMenuPassThroughOptionType	null	Used to pass attributes to the list's DOM element.
menuitem	TabMenuPassThroughOptionType	null	Used to pass attributes to the list item's DOM element.
action	TabMenuPassThroughOptionType	null	Used to pass attributes to the action's DOM element.
icon	TabMenuPassThroughOptionType	null	Used to pass attributes to the icon's DOM element.
label	TabMenuPassThroughOptionType	null	Used to pass attributes to the label's DOM element.
inkbar	TabMenuPassThroughOptionType	null	Used to pass attributes to the inkbar's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

TabMenu

Import #

Basic #

Controlled #

Template #

Command #

Router #

Accessibility #

Screen Reader

Keyboard Support

TabMenu API

TabMenu #

Props #

Emits #

Slots #

Events #

TabMenuChangeEvent #

Interfaces #

TabMenuPassThroughMethodOptions #

TabMenuPassThroughOptions #

TabMenuPassThroughAttributes #

TabMenuState #

TabMenuContext #

Types #

TabMenuPassThroughOptionType #

MenuItem #

Events #

MenuItemCommandEvent #

Options #

name	type	default	description
item	any	null	Current menuitem
index	number	null	Index of the menuitem

name	type	description
originalEvent	Event	Browser event.
item	MenuItem	Menuitem instance.
[key: string]	any

name	type	default	description
label	string \| Function	null	Property name or getter function to use as the label of an item.
icon	string	null	Icon of the item.
command	Function	null
url	string	null	External link to navigate when item is clicked.
items	MenuItem[]	null	An array of children menuitems.
disabled	boolean \| Function	false	A boolean or a function to return a boolean to specify if the item is disabled.
visible	boolean \| Function	true	A boolean or a function to return a boolean to specify if the item is visible.
target	string	null	Specifies where to open the linked document.
separator	boolean	false	Defines the item as a separator.
style	any	null	Inline style of the menuitem.
class	any	null	Style class of the menuitem.
key	string	null	Unique identifier of an item.
[key: string]	any	null