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.

<PageFeatures />

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.

<ExamplesUsage name="v-tabs" /> <PromotedEntry />

API

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

<ApiInline hide-links />

Examples

Props

Align tabs

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

<ExamplesExample file="v-tabs/prop-align-tabs-center" /> <ExamplesExample file="v-tabs/prop-align-tabs-end" />

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

<ExamplesExample file="v-tabs/prop-align-tabs-title" />

Center active

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

<ExamplesExample file="v-tabs/prop-center-active" />

Custom icons

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

<ExamplesExample file="v-tabs/prop-icons" />

Fixed tabs

The fixed-tabs prop forces v-tab items to take up all available space up to 300px width, and centers them.

<ExamplesExample file="v-tabs/prop-fixed-tabs" />

Grow

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

<ExamplesExample file="v-tabs/prop-grow" />

Stacked

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

<ExamplesExample file="v-tabs/prop-stacked" />

Slider Transition

With slider-transition you can change default animation of the slider so it better fits with the app design.

<ExamplesExample file="v-tabs/prop-slider-transition" />

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.

<ExamplesExample file="v-tabs/misc-pagination" />

Vertical tabs

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

<ExamplesExample file="v-tabs/prop-direction" />

Spaced

Vertical tabs can be customized with spaced prop to move the text away from the icon.

<ExamplesExample file="v-tabs/prop-spaced" />

Misc

Content

It is common to put v-tabs inside the extension slot of v-toolbar.

<ExamplesExample file="v-tabs/misc-content" />

Mobile tabs

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

<ExamplesExample file="v-tabs/misc-mobile" />

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.

<ExamplesExample file="v-tabs/misc-dynamic" />

Overflow to menu

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

<ExamplesExample file="v-tabs/misc-overflow-to-menu" />

Slots

Tab and window items

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

<ExamplesExample file="v-tabs/slot-tabs" />