# 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-slide-group. It provides an easy to use interface for organizing content into separate sections.

# API

# Examples

# Props

# Align with title

Make v-tabs line 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 items to take up all available space up to their maximum width (300px).

# Grow

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

# Stacked

Using stacked prop you can have buttons that use both icons and text.

# 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.

# 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.

# Mobile tabs

On mobile you can use v-tab items with just icons to conserve space.

# Dynamic Tabs

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.

# Overflow to menu

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

Ready for more?

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