# Tabs

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.

# Usage

The v-tabs component is a styled extension of v-item-group. It provides an easy to use interface for organizing groups of content.

# API

# Caveats

When using the dark prop and NOT providing a custom color, the v-tabs component will default its color to white.

When using v-tab-item's that contain required input fields you must use the eager prop in order to validate the required fields that are not yet visible.

# Examples

# Props

# Align with title

Make v-tabs lined up with the v-toolbar-title component using the align-with-title prop (v-app-bar-nav-icon or v-btn must be used in v-toolbar).

# Center active

The center-active prop will make the active tab always centered

# Custom icons

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

# Fixed tabs

The fixed-tabs prop forces v-tab to take up all available space up to the maximum width (300px).

# Grow

The grow prop will make the tab items take up all available space up to a maximum width of 300px.

# Icons and text

Using icons-and-text prop increases the v-tabs height to 72px to allow for both icons as well as text to be used.

# Pagination

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.

# Right

The right prop aligns the tabs to the right.

# Vertical Tabs

The vertical prop allows for v-tab components to stack vertically.

# Misc

# Content

It is common to put v-tabs inside the extension slot of v-toolbar. Using v-toolbar's tabs prop auto adjusts its height to 48px to match v-tabs.

# Desktop tabs

You can represent v-tab actions by using single icons. This is useful when it is easy to correlate content to each tab.

# Dynamic height

When changing your v-tab-item, the content area will smoothly scale to the new size.

# Dynamic Tabs

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.

# Tab Items

The v-tabs-items component allows for you to customize the content per tab. Using a shared v-model, the v-tabs-items will sync with the currently selected v-tab.

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.

Edit this page on GitHub

Last updated:11/12/2024, 6:59:50 AM