How to make Vuetify App bar scrollable horizontally - vue.js

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.