Vue Tabs Component

Import #


import Tabs from 'primevue/tabs';
import TabList from 'primevue/tablist';
import Tab from 'primevue/tab';
import TabPanels from 'primevue/tabpanels';
import TabPanel from 'primevue/tabpanel';

Basic #

Tabs is defined using TabList, Tab, TabPanels and TabPanel components. Tab and TabPanel components are associated with their value properties.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<Tabs value="0">
    <TabList>
        <Tab value="0">Header I</Tab>
        <Tab value="1">Header II</Tab>
        <Tab value="2">Header III</Tab>
    </TabList>
    <TabPanels>
        <TabPanel value="0">
            <p class="m-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </TabPanel>
        <TabPanel value="1">
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
            </p>
        </TabPanel>
        <TabPanel value="2">
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
            </p>
        </TabPanel>
    </TabPanels>
</Tabs>

Dynamic #

Tabs can be generated dynamically using the standard v-for directive on Tab and TabPanel.

Tab 1 Content


<Tabs value="0">
    <TabList>
        <Tab v-for="tab in tabs" :key="tab.title" :value="tab.value">{{ tab.title }}</Tab>
    </TabList>
    <TabPanels>
        <TabPanel v-for="tab in tabs" :key="tab.content" :value="tab.value">
            <p class="m-0">{{ tab.content }}</p>
        </TabPanel>
    </TabPanels>
</Tabs>

Controlled #

Tabs can be controlled programmatically using value property as a model.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


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

<Tabs v-model:value="value">
    <TabList>
        <Tab value="0">Header I</Tab>
        <Tab value="1">Header II</Tab>
        <Tab value="2">Header III</Tab>
    </TabList>
    <TabPanels>
        <TabPanel value="0">
            <p class="m-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </TabPanel>
        <TabPanel value="1">
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
            </p>
        </TabPanel>
        <TabPanel value="2">
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
            </p>
        </TabPanel>
    </TabPanels>
</Tabs>

Scrollable #

Adding scrollable property displays navigational buttons at each side to scroll between tabs.

Tab 1 Content


<Tabs value="0" scrollable>
    <TabList>
        <Tab v-for="tab in scrollableTabs" :key="tab.title" :value="tab.value">
            {{ tab.title }}
        </Tab>
    </TabList>
    <TabPanels>
        <TabPanel v-for="tab in scrollableTabs" :key="tab.content" :value="tab.value">
            <p class="m-0">{{ tab.content }}</p>
        </TabPanel>
    </TabPanels>
</Tabs>

Disabled #

Enabling disabled property of a Tab prevents user interaction.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<Tabs value="0">
    <TabList>
        <Tab value="0">Header I</Tab>
        <Tab value="1">Header II</Tab>
        <Tab value="2">Header III</Tab>
        <Tab disabled>Header IV</Tab>
    </TabList>
    <TabPanels>
        <TabPanel value="0">
            <p class="m-0">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
        </TabPanel>
        <TabPanel value="1">
            <p class="m-0">
                Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
                ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
            </p>
        </TabPanel>
        <TabPanel value="2">
            <p class="m-0">
                At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa
                qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
            </p>
        </TabPanel>
    </TabPanels>
</Tabs>

Template #

Custom content for a tab is defined with the default slot. The optional as property controls the default container element of a tab, for example setting it to a div renders a div for the header instead of a button. The asChild option enables the headless mode for further customization by passing callbacks and properties to implement your own tab header.

Amy Elsner

Onyama Limba

Ioni Bowcher2

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


<Tabs value="0">
    <TabList>
        <Tab value="0" as="div" class="flex items-center gap-2">
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
            <span class="font-bold whitespace-nowrap">Amy Elsner</span>
        </Tab>
        <Tab value="1" as="div" class="flex items-center gap-2">
            <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
            <span class="font-bold whitespace-nowrap">Onyama Limba</span>
        </Tab>
        <Tab v-slot="slotProps" value="2" asChild>
            <div :class="['flex items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
                <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
                <span class="font-bold whitespace-nowrap">Ioni Bowcher</span>
                <Badge value="2" />
            </div>
        </Tab>
    </TabList>
    <TabPanels>
        <TabPanel value="0" as="p" class="m-0">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </TabPanel>
        <TabPanel value="1" as="p" class="m-0">
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
            ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Consectetur, adipisci velit, sed quia non numquam eius modi.
        </TabPanel>
        <TabPanel v-slot="slotProps" value="2" asChild>
            <div v-show="slotProps.active" :class="slotProps.class" v-bind="slotProps.a11yAttrs">
                <p class="m-0">
                    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in
                    culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.
                </p>
            </div>
        </TabPanel>
    </TabPanels>
</Tabs>

Tab Menu #

A navigation menu is implemented using tabs without the panels where the content of a tab is provided by a route component like router-view. For the purpose of this demo, router-view is not included.

Dashboard

Transactions

Products

Messages


<Tabs value="/dashboard">
    <TabList>
        <Tab v-for="tab in items" :key="tab.label" :value="tab.route">
            <router-link v-if="tab.route" v-slot="{ href, navigate }" :to="tab.route" custom>
                <a v-ripple :href="href" @click="navigate" class="flex items-center gap-2 text-inherit">
                    <i :class="tab.icon" />
                    <span>{{ tab.label }}</span>
                </a>
            </router-link>
        </Tab>
    </TabList>
</Tabs>

Accessibility #

Screen Reader

The tabs container in TabList is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Tabs. Each Tab has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding TabPanel. TabPanel has tabpanel role, an id to match the aria-controls of Tab and aria-labelledby reference to Tab as the accessible name.

Tab Keyboard Support

Key	Function
tab	Moves focus through the header.
enter	Activates the focused tab header.
space	Activates the focused tab header.
right arrow	Moves focus to the next header. If focus is on the last header, moves focus to the first header.
left arrow	Moves focus to the previous header. If focus is on the first header, moves focus to the last header.
home	Moves focus to the last header.
end	Moves focus to the first header.
pageUp	Moves scroll position to first header.
pageDown	Moves scroll position to last header.

name	type	default	description
value	string \| number	null	Value of the active tab.
lazy	boolean	false	When enabled, hidden tabs are not rendered at all. Defaults to false that hides tabs with css.
scrollable	boolean	false	When specified, enables horizontal and/or vertical scrolling.
showNavigators	boolean	true	Whether to display navigation buttons in container when scrollable is enabled.
tabindex	number	0	Index of the element in tabbing order.
selectOnFocus	boolean	false	When enabled, the focused tab is activated.
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<TabsPassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	returnType	description
default	VNode<RendererNode, RendererElement, Object>[]	Default slot to detect TabPanel components.
previcon	VNode<RendererNode, RendererElement, Object>[]	Previous button icon template for the scrollable component.
nexticon	VNode<RendererNode, RendererElement, Object>[]	Next button icon template for the scrollable component.

name	type	default	description
instance	any	null	Defines instance.
props	TabsProps	null	Defines valid properties.
state	TabsState	null	Defines current inline state.
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	TabsPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
d_value	string \| number	null	Current active value state.
id	string	null	Unique id for the Tabs component.

name	type	default	description
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<TabListPassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.

name	type	default	description
root	TabListPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
prevButton	TabListPassThroughOptionType	null	Used to pass attributes to the previous button component.
nextButton	TabListPassThroughOptionType	null	Used to pass attributes to the next button component.
content	TabListPassThroughOptionType	null	Used to pass attributes to the content's DOM element.
tabList	TabListPassThroughOptionType	null	Used to pass attributes to the tablist's DOM element.
activeBar	TabListPassThroughOptionType	null	Used to pass attributes to the inkbar's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
root	TabPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
dt	any	null	It generates scoped CSS variables using design tokens for the component.
pt	PassThrough<TabPanelsPassThroughOptions>	null	Used to pass attributes to DOM elements inside the component.
ptOptions	any	null	Used to configure passthrough(pt) options of the component.

name	type	default	description
root	TabPanelsPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	parameters	returnType	description
default		VNode<RendererNode, RendererElement, Object>[]	Custom content template.
header		VNode<RendererNode, RendererElement, Object>[]	Custom header template.

name	type	default	description
root	TabPanelPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
header	TabPanelPassThroughOptionType	null	Used to pass attributes to the header's DOM element.
headerAction	TabPanelPassThroughOptionType	null	Used to pass attributes to the header action's DOM element.
headerTitle	TabPanelPassThroughOptionType	null	Used to pass attributes to the title's DOM element.
content	TabPanelPassThroughOptionType	null	Used to pass attributes to the list's DOM element.
hooks	any	null	Used to manage all lifecycle hooks.

name	type	default	description
index	number	null	Current index of the tab.
count	number	null	Count of tabs
first	boolean	null	Whether the tab is first.
last	boolean	null	Whether the tab is last.
active	boolean	null	Whether the tab is active.

Tabs

Import #

Basic #

Dynamic #

Controlled #

Scrollable #

Disabled #

Template #

Tab Menu #

Accessibility #

Screen Reader

Tab Keyboard Support

Tabs API

Tabs #

Props #

Emits #

Slots #

Interfaces #

TabsPassThroughMethodOptions #

TabsPassThroughOptions #

TabsPassThroughAttributes #

TabsState #

Types #

TabsPassThroughOptionType #

TabsEmits #

TabList #

Props #

Slots #

Interfaces #

TabListPassThroughMethodOptions #

TabListPassThroughOptions #

TabListPassThroughAttributes #

TabListContext #

Types #

TabListPassThroughOptionType #

TabListEmits #

Tab #

Props #

Slots #

Interfaces #

TabPassThroughMethodOptions #

TabPassThroughOptions #

TabPassThroughAttributes #

TabContext #

Types #

TabPassThroughOptionType #

TabEmits #

TabPanels #

Props #

Slots #

Interfaces #

TabPanelsPassThroughMethodOptions #

TabPanelsPassThroughOptions #

TabPanelsPassThroughAttributes #

TabPanelsContext #

Types #

TabPanelsPassThroughOptionType #

TabPanelsEmits #

TabPanel #

Props #

Slots #

Interfaces #

TabPanelPassThroughMethodOptions #

TabPanelPassThroughOptions #

TabPanelPassThroughAttributes #

TabPanelContext #

Types #

TabPanelPassThroughOptionType #

TabPanelEmits #