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.

Go to api


The v-tabs component is highly customizable to suit your needs. You can get and set the currently active tab by using the v-model prop on the v-tabs component.

Tabs can be centered by using the centered prop. Here we have also applied the fixed prop which gives all tab items a fixed size, regardless of content.

Tabs are not the only thing you can put inside the v-tabs component. In this example we've also added a toolbar.

Here is another example of additional content inside the v-tabs component.

By using the icons prop you can add icons to each tab item.

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

If the tab items overflow their container, pagination controls will appear.

You can disable the pagination controls by setting the scrollable prop to false. This also has the effect of removing the margins around the tab item container.