Tabs

The Tabs component serves as a versatile tool for organizing and presenting content within a tabbed interface. It allows you to toggle between different sections of content. You can also use Tabs component as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

info

For more details about Vuetify’s usage of Tabs component, click Tabs page.
For more prop explanations, click Vuetify Tabs API page.

Props

Name	Description	Type	Default
activeClass	The active-class applied to children when they are activated.	string	undefined
alignWithTitle	Make v-tabs lined up with the toolbar title	string	undefined
backgroundColor	Changes the background color of the component.	string	undefined
centered	Centers the tabs	boolean	false
centerActive	Forces the selected tab to be centered	boolean	false
dark	Applies the dark theme	boolean	false
class	Allows custom properties to take effect.	string	undefined
fixedTabs	TabsItem min-width 160px, max-width 360px	boolean	false
grow	Force Tab's to take up all available space	boolean	false
height	Sets the height of the tabs bar	number|string	undefined
iconsAndText	Will stack icon and text vertically	boolean	false
mobileBreakpoint	Sets the designated mobile breakpoint for the component.	string|number	undefined
nextIcon	Right pagination icon	string	'$next'
prevIcon	Left pagination icon	string	'$prev'
showArrows	Show pagination arrows if the tab items overflow their container. For mobile devices, arrows will only display when using this prop.	boolean|string	undefined
vertical	stacks tabs on top of each other vertically.	boolean	false
value	The designated model value for the component	any	undefined
visible	Visibility of Switch component	boolean	true

Events

Name	Description	Type
change	Emitted when tab is changed by user interaction. Returns a string if href attribute is set and number if it is not.	number|string

Component Samples

Centered

Icon-and-text

Tab

For Mobile Usage

You should not use Tab component alone on mobile, it should be within Tabs.

Props

Name	Description	Type	Default
appendIcon	Appends an icon to the component, uses the same syntax as icon.	string	undefined
activeClass	Configure the active CSS class applied when the link is active. You can find more information about the active-class prop on the vue-router documentation.	string	undefined
class	Allows custom properties to take effect.	string	undefined
dark	Applies the dark theme.	boolean	false
disabled	Removes the ability to click or target the component.	boolean	false
link	Designates that the component is a link. This is automatic when using the href or to prop.	boolean	false
prependInnerIcon	Prepends an icon inside the component’s input, uses the same syntax as v-icon.	string	undefined
ripple	Applies the v-ripple directive.	boolean|object	True
replace	Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation.	boolean	false
tag	Specify a custom tag used on the root element.	string	undefined
target	Designates the target attribute. This should only be applied when using the href prop.	string	undefined
to	Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation.	string|object	undefined
visible	Visibility of Switch component.	boolean	true

Events

Name	Description
change	Emitted when tab becomes active
click	Emitted when the component is clicked

TabItem

The TabItem component represents individual tabs within the tabbed interface. Each TabItem corresponds to a specific section of content and serves as a clickable element that you can interact with to navigate between tabs.

Props

Name	Description	Type	Default
class	Allows custom properties to take effect.	string	undefined
eager	Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.	boolean	true
value	Sets the value of the tab. If not provided, the index will be used.	any	undefined
visible	Visibility of Switch component	boolean	true

For Mobile Usage

You should not use TabItem component alone on mobile, it should be within Tabs.

TabsSlider

The TabsSlider component is responsible for visually indicating the active tab within the tabbed interface. It provides a visual cue to you, highlighting the currently selected tab.

Props

Name	Description	Type	Default
class	Allows custom properties to take effect.	string	undefined
visible	Visibility of Switch component	boolean	true

For Mobile Usage

You should not use TabsSlider component alone on mobile, it should be within Tabs.

Samples Qjson

tab