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
The class used when item is active
Make v-tabs lined up with the toolbar title
Centers the tabs
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))
Applies the dark theme variant
v-tabs-item min-width 160px (72px mobile), max-width 264px
Force v-tab's to take up all available space
Sets the component height
Hide's the generated v-tabs-slider
Will stack icon and text vertically
Applies the light theme variant
Specifies that a value must be present or the first available will be selected
Sets maximum width
Sets the designated mobile breakpoint
Allow multiple selections. value prop accepts array
Right pagination icon
Left pagination icon
Aligns tabs to the right
Always show pagination arrows
Changes the background color of an auto-generated v-tabs-slider
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.
With search
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.