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

Component	Description
v-tabs	Primary Component
v-tab	Sub-component used for modifying the v-tabs state

Examples

Props

Align tabs

The align-tabs prop will align tabs to the start, center, or end of its container.

Align tabs with title

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

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), and centers them.

Grow

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

Stacked

Using stacked increases the v-tabs height to 72px to allow for both icons and text to be displayed.

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

Slots

Tab and window items

Use the tab and item slots with the items prop to reduce the markup required to build tabs.

TIP

This feature was introduced in v3.6.0 (Nebula)