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.

v-tabs/usage.vue

API

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

v-tabs/prop-align-title.vue

Align end

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

v-tabs/prop-align-center.vue
v-tabs/prop-align-end.vue

Center active

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

v-tabs/prop-center-active.vue

Custom icons

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

v-tabs/prop-icons.vue

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.

v-tabs/prop-fixed-tabs.vue

Grow

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

v-tabs/prop-grow.vue

Stacked

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

v-tabs/prop-stacked.vue

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.

v-tabs/misc-pagination.vue

Vertical tabs

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

v-tabs/prop-direction.vue

Misc

Content

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

v-tabs/misc-content.vue

Mobile tabs

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

v-tabs/misc-mobile.vue

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.

v-tabs/misc-dynamic.vue

Overflow to menu

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

v-tabs/misc-overflow-to-menu.vue

Ready for more?

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