title: How to make mobile responsive navbar using vuetify
body: <p>I have a vuetify tab component and I hope to use it as my navigation menu. I want to create a responsive navbar using vuetify. Here is my code.  &lt;y requirement is like a normal navbar working .when i open the page in mobile it should hide the menu and show the hamburger menu.</p>
  <p>navbar.vue</p>
  <pre><code>
  &lt;template&gt;
      &lt;v-card&gt;
        &lt;v-toolbar
          color=&quot;cyan&quot;
          dark
          flat
        &gt;
          &lt;v-app-bar-nav-icon&gt;&lt;/v-app-bar-nav-icon&gt;
    
  
      enter code here
          &lt;v-toolbar-title&gt;Your Dashboard&lt;/v-toolbar-title&gt;
    
          &lt;v-spacer&gt;&lt;/v-spacer&gt;
    
          &lt;v-btn icon&gt;
            &lt;v-icon&gt;mdi-magnify&lt;/v-icon&gt;
          &lt;/v-btn&gt;
    
          &lt;v-btn icon&gt;
            &lt;v-icon&gt;mdi-dots-vertical&lt;/v-icon&gt;
          &lt;/v-btn&gt;
    
          &lt;template v-slot:extension&gt;
            &lt;v-tabs
              v-model=&quot;tab&quot;
              align-with-title
            &gt;
              &lt;v-tabs-slider color=&quot;yellow&quot;&gt;&lt;/v-tabs-slider&gt;
    
              &lt;v-tab
                v-for=&quot;item in items&quot;
                :key=&quot;item&quot;
              &gt;
                {{ item }}
              &lt;/v-tab&gt;
            &lt;/v-tabs&gt;
          &lt;/template&gt;
        &lt;/v-toolbar&gt;
    
        &lt;v-tabs-items v-model=&quot;tab&quot;&gt;
          &lt;v-tab-item
            v-for=&quot;item in items&quot;
            :key=&quot;item&quot;
          &gt;
           
          &lt;/v-tab-item&gt;
        &lt;/v-tabs-items&gt;
      &lt;/v-card&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    el: '#app',
    data () {
      return {
        tab: null,
        items: [
          'web', 'shopping', 'videos', 'images', 'news',
        ],
      }
    }
  }
  &lt;/script&gt;
  </code></pre>