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 with title

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

Align end

The align prop can also align tabs to the center or end.

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.