It is common to put
v-tabs inside the extension slot of
v-toolbar's tabs prop auto adjusts its height to 48px to match
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.
v-tabs component is a styled extension of v-item-group. It provides an easy to use interface for organizing groups of content.
When using the dark prop and NOT providing a custom color, the
v-tabs component will default its color to white.
Select your desired component from below and see the available props, slots, events and functions.
Below is a collection of simple to complex examples.
The fixed-tabs prop forces
v-tab to take up all available space up to the maximum width (300px).
Active tab is always centered
v-tabs-items component allows for you to customize the content per tab. Using a shared
v-tabs-items will sync with the currently selected
The grow prop will make the tab items take up all available space up to a maximum width of 300px.
If the tab items overflow their container, pagination controls will appear on desktop. For mobile devices, arrows will only display with the show-arrows prop.
prev-icon and next-icon can be used for applying custom pagination icons.
Tabs can be toggled to stack its
v-tab components vertically.
v-tab's can contain icons as well as text. This increases the
v-tabs height to 72px.
The right prop aligns the tabs to the right.
It is common to put
v-tabs lined up with the
v-toolbar-title component (
v-btn must be used in
Tabs can be dynamically added and removed. This allows you to update to any number and the
v-tabs component will react. In this example when we add a new tab, we automatically change our model to match. As we add more tabs and overflow the container, the selected item will be automatically scrolled into view. Remove all
v-tabs and the slider will disappear.
When changing your
v-tab-item, the content area will smoothly scale to the new size.
You can represent
v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.