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.