How to make Vuetify App bar scrollable horizontally

Question

I'm struggling with Vuetify App bar to make it scrollable horizontally.

Is it possible to make it scrollable or collapsable in any way? I'm using Nuxt/Vuetify to build a platform. this is the image of web view

This is the image of mobile view

Answer 1

Use v-slide-groups instead. https://vuetifyjs.com/en/components/slide-groups/ Please check the pen Link

<v-app id="inspire" flex>
    <v-app-bar
      absolute
      color="cyan accent-3">
      <div class="d-flex flex-row align-center col-12">
        <div class="col-8 col-md-8">
        <v-slide-group show-arrows v-model="model">
        <v-slide-item v-slot:default="{ active, toggle }"
                    key="a">
        <v-btn icon @click="toggle">
          <v-icon>mdi-account-group</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="b">
        <v-btn icon @click="toggle">
          <v-icon>mdi-shield</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="c">
        <v-btn icon @click="toggle">
          <v-icon>mdi-school</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="d">
        <v-btn icon @click="toggle">
          <v-icon>mdi-book-open</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="e">
        <v-btn icon @click="toggle">
          <v-icon>mdi-grid</v-icon>
        </v-btn>
      </v-slide-item>
      <v-slide-item v-slot:default="{ active, toggle }" key="f">
        <v-btn icon @click="toggle">
          <v-icon>mdi-link</v-icon>
        </v-btn>
      </v-slide-item>
    </v-slide-group>
    </div>
      <v-spacer></v-spacer>
      <v-btn icon>
        <v-icon>mdi-face</v-icon>
      </v-btn>
      <v-btn icon>
        <v-icon>mdi-door</v-icon>
      </v-btn>
    </div>
    </v-app-bar>
    <v-content>
      <v-container class="mt-10">
         <v-row>
           <v-col>
              You have clicked on {{model}} link
           </v-col>
         </v-row>
      </v-container>
    </v-content>
  </v-app>

Answer 2

No option by Vuetify API. Any way you could use the idea/concept you find her (Basic CSS not related to vue/vuetify): https://www.w3schools.com/howto/howto_css_menu_horizontal_scroll.asp -or- https://iamsteve.me/blog/entry/horizontal-scrolling-responsive-menu

style="overflow-x:auto; white-space: nowrap;"

Example:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.css" rel="stylesheet"/>
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet"/>


<div id="app">
  <v-app id="inspire">
    <div>
      <v-app-bar
                 color="deep-purple accent-4"
                 dense
                 dark
                 >
        <v-app-bar-nav-icon></v-app-bar-nav-icon>
        <v-spacer></v-spacer>
        <div style="overflow-x:auto; white-space: nowrap;">
          <v-btn icon>
            <v-icon>mdi-heart</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-domain</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-message</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-email</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-call-split</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-call-split</v-icon>
          </v-btn>        <v-btn icon>
          <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-heart</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-domain</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-message</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-domain</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-message</v-icon>
          </v-btn>
          <v-btn icon>
            <v-icon>mdi-magnify</v-icon>
          </v-btn>
        </div>

      </v-app-bar>
    </div>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.2.22/dist/vuetify.min.js"></script>

Use Media-Q if you want to disable this idea on desktop.