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.

<template>
  <v-tabs>
    <v-tab>Item One</v-tab>
    <v-tab>Item Two</v-tab>
    <v-tab>Item Three</v-tab>
  </v-tabs>
</template>
// Tab with content
<v-tabs fixed centered>
 <v-tabs-bar class="cyan" dark>
   <v-tabs-slider class="yellow"></v-tabs-slider>
   <v-tabs-item
     v-for="i in items"
     :key="i"
     :href="'#tab-' + i"
   >
     {{ i }}
   </v-tabs-item>
 </v-tabs-bar>
 <v-tabs-items>
   <v-tabs-content
     v-for="i in items"
     :key="i"
     :id="'tab-' + i"
   >
     <v-card flat>
       <v-card-text>{{ text }}</v-card-text>
     </v-card>
   </v-tabs-content>
 </v-tabs-items>
</v-tabs>