Vue Tabs Component

Import #


import TabView from 'primevue/tabview';
import TabPanel from 'primevue/tabpanel';

Basic #

TabView consists of one or more TabPanel elements.

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.

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.

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.


<TabView>
    <TabPanel header="Header I">
        <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 header="Header II">
        <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 header="Header III">
        <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>
</TabView>

Dynamic #

Tabs can be generated dynamically using the standard v-for directive.

Tab 1 Content

Tab 2 Content

Tab 3 Content


<TabView>
    <TabPanel v-for="tab in tabs" :key="tab.title" :header="tab.title">
        <p class="m-0">{{ tab.content }}</p>
    </TabPanel>
</TabView>

Controlled #

Tabs can be controlled programmatically using activeIndex property.

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.

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.

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.


<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>

<TabView v-model:activeIndex="active">
    <TabPanel header="Header I">
        <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 header="Header II">
        <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 header="Header III">
        <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>
</TabView>

Scrollable #

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

Tab 1 Content

Tab 2 Content

Tab 3 Content

Tab 4 Content

Tab 5 Content

Tab 6 Content

Tab 7 Content

Tab 8 Content

Tab 9 Content

Tab 10 Content

Tab 11 Content

Tab 12 Content

Tab 13 Content

Tab 14 Content

Tab 15 Content

Tab 16 Content

Tab 17 Content

Tab 18 Content

Tab 19 Content

Tab 20 Content

Tab 21 Content

Tab 22 Content

Tab 23 Content

Tab 24 Content

Tab 25 Content

Tab 26 Content

Tab 27 Content

Tab 28 Content

Tab 29 Content

Tab 30 Content

Tab 31 Content

Tab 32 Content

Tab 33 Content

Tab 34 Content

Tab 35 Content

Tab 36 Content

Tab 37 Content

Tab 38 Content

Tab 39 Content

Tab 40 Content

Tab 41 Content

Tab 42 Content

Tab 43 Content

Tab 44 Content

Tab 45 Content

Tab 46 Content

Tab 47 Content

Tab 48 Content

Tab 49 Content

Tab 50 Content


<TabView :scrollable="true">
    <TabPanel v-for="tab in scrollableTabs" :key="tab.title" :header="tab.title">
        <p class="m-0">{{ tab.content }}</p>
    </TabPanel>
</TabView>

Disabled #

Enabling disabled property of a TabPanel 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.

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.

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.


<TabView>
    <TabPanel header="Header I">
        <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 header="Header II">
        <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 header="Header III">
        <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>
    <TabPanel header="Header IV" :disabled="true"></TabPanel>
</TabView>

Template #

Custom content for the title section of a panel is defined using the header template.

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.

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.

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.


<TabView class="tabview-custom">
    <TabPanel>
        <template #header>
            <div class="flex align-items-center gap-2">
                <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
                <span class="font-bold white-space-nowrap">Amy Elsner</span>
            </div>
        </template>
        <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>
        <template #header>
            <div class="flex align-items-center gap-2">
                <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
                <span class="font-bold white-space-nowrap">Onyama Limba</span>
            </div>
        </template>
        <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>
        <template #header>
            <div class="flex align-items-center gap-2">
                <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
                <span class="font-bold white-space-nowrap">Ioni Bowcher</span>
                <Badge value="2" />
            </div>
        </template>
        <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>
</TabView>

Accessibility #

Screen Reader

TabView container 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 TabView. Each tab header has a tab role along with aria-selected state attribute and aria-controls to refer to the corresponding tab content element. The content element of each tab has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name.

Tab Header 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
activeIndex	number	0	Index 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 enabled displays buttons at each side of the tab headers to scroll the tab list.
tabindex	number	0	Index of the element in tabbing order.
selectOnFocus	boolean	false	When enabled, the focused tab is activated.
previousButtonProps	ButtonHTMLAttributes	null	Used to pass all properties of the HTMLButtonElement to the previous button.
nextButtonProps	ButtonHTMLAttributes	null	Used to pass all properties of the HTMLButtonElement to the next button.
prevIcon	string	null	Previous icon of the scrollable tabview.
nextIcon	string	null	Next icon of the scrollable tabview.
pt	PassThrough<TabViewPassThroughOptions	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
update:activeIndex	index: number	void	Emitted when the activeIndex changes.
tab-change	event: TabViewChangeEvent	void	Callback to invoke when an active tab is changed.
tab-click	event: TabViewClickEvent	void	Callback to invoke when an active tab is clicked.

name	returnType	description
default	VNode<RendererNode, RendererElement, Object>[]	Default slot to detect TabPanel components.
previousicon	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	description
originalEvent	Event	Browser event
index	number	Index of the selected tab

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

TabView

Import #

Basic #

Dynamic #

Controlled #

Scrollable #

Disabled #

Template #

Accessibility #

Screen Reader

Tab Header Keyboard Support

TabView API

TabView #

Props #

Emits #

Slots #

Events #

TabViewChangeEvent #

TabViewClickEvent #

Interfaces #

TabViewPassThroughMethodOptions #

TabViewPassThroughOptions #

TabViewPassThroughAttributes #

TabViewState #

Types #

TabViewPassThroughOptionType #

TabPanel #

Props #

Slots #

Interfaces #

TabPanelPassThroughMethodOptions #

TabPanelPassThroughOptions #

TabPanelPassThroughAttributes #

TabPanelContext #

Types #

TabPanelPassThroughOptionType #

name	type	default	description
instance	any	null	Defines instance.
props	TabViewProps	null	Defines valid properties.
state	TabViewState	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	TabViewPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
navContainer	TabViewPassThroughOptionType	null	Used to pass attributes to the nav container's DOM element.
navContent	TabViewPassThroughOptionType	null	Used to pass attributes to the nav content's DOM element.
nav	TabViewPassThroughOptionType	null	Used to pass attributes to the list's DOM element.
inkbar	TabViewPassThroughOptionType	null	Used to pass attributes to the inkbar's DOM element.
previousButton	TabViewPassThroughOptionType	null	Used to pass attributes to the previous button's DOM element.
previousIcon	TabViewPassThroughOptionType	null	Used to pass attributes to the previous button icon's DOM element.
nextButton	TabViewPassThroughOptionType	null	Used to pass attributes to the next button's DOM element.
nextIcon	TabViewPassThroughOptionType	null	Used to pass attributes to the next button icon's DOM element.
panelContainer	TabViewPassThroughOptionType	null	Used to pass attributes to the panel's DOM element.
tab	TabPanelPassThroughOptionType	null	Used to pass attributes to TabPanel helper components.
tabpanel	TabPanelPassThroughOptionType	null	Used to pass attributes to TabPanel helper components.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
d_activeIndex	number	null	Current active index state.
id	string	null	Unique id for the TabView component.
isPrevButtonDisabled	boolean	true	Current state of previous button.
isNextButtonDisabled	boolean	false	Current state of the next button.

name	type	default	description
header	string	null	Orientation of tab headers.
headerStyle	any	null	Inline style of the tab header.
headerClass	any	null	Style class of the tab header.
headerProps	LiHTMLAttributes	null	Used to pass all properties of the HTMLLiElement to the tab header.
headerActionProps	AnchorHTMLAttributes	null	Used to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
contentStyle	any	null	Inline style of the tab content.
contentClass	any	null	Style class of the tab content.
contentProps	HTMLAttributes	null	Used to pass all properties of the HTMLDivElement to the tab content.
disabled	boolean	false	Whether the tab is disabled.
pt	PassThrough<TabPanelPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.

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