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.
The fixed-tabs prop sets a higher minimum width and applies a new maximum width to
v-tabs-items. On desktop screens, the tab items will be centered within the
v-tabs component and switch to evenly fill on mobile.
Right aligned tabs
The right prop aligns the tabs to the right
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
Icons and text
By using the icons-and-text prop you can add icons to each tab item.
Align tabs with toolbar title
v-tabs lined up with the
v-toolbar-title component (
v-btn must be used in
v-toolbar). May not work if the tab text is wrapped.
The grow prop will make the tab items take up all available space.
If the tab items overflow their container, pagination controls will appear.
prev-icon and next-icon can be used for applying custom pagination icons.