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.
The v-tabs component is a styled extension of v-slide-group. It provides an easy to use interface for organizing content into separate sections.
<v-sheet elevation="2">
<v-tabs v-model="tab" color="primary">
<v-tab value="one">Item One</v-tab>
<v-tab value="two">Item Two</v-tab>
<v-tab value="three">Item Three</v-tab>
</v-tabs>
<v-divider></v-divider>
<v-tabs-window v-model="tab">
<v-tabs-window-item value="one">
<v-sheet class="pa-5" color="purple">One</v-sheet>
</v-tabs-window-item>
<v-tabs-window-item value="two">
<v-sheet class="pa-5" color="orange">Two</v-sheet>
</v-tabs-window-item>
<v-tabs-window-item value="three">
<v-sheet class="pa-5" color="brown">Three</v-sheet>
</v-tabs-window-item>
</v-tabs-window>
</v-sheet><script setup>
import { ref } from 'vue'
const tab = ref('one')
</script>The align-tabs prop will align tabs to the start, center, or end of its container.
Make v-tabs line up with the v-toolbar-title component by setting the align-tabs prop to title (v-app-bar-nav-icon or v-btn must be used in v-toolbar).
The center-active prop will make the active tab always centered.
prev-icon and next-icon can be used for applying custom pagination icons.
The fixed-tabs prop forces v-tab items to take up all available space up to 300px width, and centers them.
The grow prop will make the tab items take up all available space with no limit.
Using stacked increases the v-tabs height to 72px to allow for both icons and text to be displayed.
With slider-transition you can change default animation of the slider so it better fits with the app design.
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.
The direction prop allows for v-tab components to stack vertically.
Sed aliquam ultrices mauris. Donec posuere vulputate arcu. Morbi ac felis. Etiam feugiat lorem non metus. Sed a libero.
Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus. Aenean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Aliquam lobortis. Aliquam lobortis. Suspendisse non nisl sit amet velit hendrerit rutrum.
Phasellus dolor. Fusce neque. Fusce fermentum odio nec arcu. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Phasellus blandit leo ut odio.
Vertical tabs can be customized with spaced prop to move the text away from the icon.
It is common to put v-tabs inside the extension slot of v-toolbar.
On mobile you can use v-tab items with just icons to conserve space.
Tabs can be dynamically added and removed. 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-tab items and the slider will disappear.
Use the tab and item slots with the items prop to reduce the markup required to build tabs.