Tab

The v-tabs component is used for hiding content behind a selectable item. This can also be used as a pseudo-navigation for a page, where the tabs are links and the tab-items are the content.

API

Name
active-class
Default
'v-tabs__item--active'
Type
string

The class used when item is active

Name
align-with-title
Default
false
Type
boolean

Make v-tabs lined up with the toolbar title

Name
centered
Default
false
Type
boolean

Centers the tabs

Name
color
Default
undefined
Type
string

Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))

Name
dark
Default
false
Type
boolean

Applies the dark theme variant

Name
fixed-tabs
Default
false
Type
boolean

v-tabs-item min-width 160px (72px mobile), max-width 264px

Name
grow
Default
false
Type
boolean

Force v-tab's to take up all available space

Name
height
Default
undefined
Type
number | string

Sets the component height

Name
hide-slider
Default
false
Type
boolean

Hide's the generated v-tabs-slider

Name
icons-and-text
Default
false
Type
boolean

Will stack icon and text vertically

Name
light
Default
false
Type
boolean

Applies the light theme variant

Name
mandatory
Default
true
Type
boolean

Specifies that a value must be present or the first available will be selected

Name
max
Default
undefined
Type
number | string

Sets maximum width

Name
mobile-break-point
Default
1264
Type
number | string

Sets the designated mobile breakpoint

Name
multiple
Default
false
Type
boolean

Allow multiple selections. value prop accepts array

Name
next-icon
Default
'$vuetify.icons.next'
Type
string

Right pagination icon

Name
prev-icon
Default
'$vuetify.icons.prev'
Type
string

Left pagination icon

Name
right
Default
false
Type
boolean

Aligns tabs to the right

Name
show-arrows
Default
false
Type
boolean

Always show pagination arrows

Name
slider-color
Default
'accent'
Type
string

Changes the background color of an auto-generated v-tabs-slider

Name
value
Default
undefined
Type
number | string

Controls visibility

Examples

Fixed tabs

The fixed-tabs prop sets a higher minimum width and applies a new maximum width to v-tabs-items. On desktop screens, the tab items will be centered within the v-tabs component and switch to evenly fill on mobile.

Right aligned tabs

The right prop aligns the tabs to the right

Content

Tabs are not the only thing you can put inside the v-tabs component. In this example we've also added a toolbar.

Here is another example of additional content inside the v-tabs component.

Icons and text

By using the icons-and-text prop you can add icons to each tab item.

Desktop tabs

Align tabs with toolbar title

Make v-tabs lined up with the v-toolbar-title component (v-toolbar-side-icon or v-btn must be used in v-toolbar). May not work if the tab text is wrapped.

Grow

The grow prop will make the tab items take up all available space.

With menu

You can use a menu to hold additional tabs, swapping them out on the fly

Pagination

If the tab items overflow their container, pagination controls will appear.

Custom icons

prev-icon and next-icon can be used for applying custom pagination icons.

Edit this page | language on Github
Vuetify 3 is now available!The latest version of Vuetify is now available!
Learn about Vuetify 3's new features and functionality for modern Vue applications
Start exploringExplore