How to make a sticky tabs bar with Vuetify?

Recently I’ve been working on a web app with Vuetify and I needed to make a tabs bar sticky (always visible, always on top of the tab content but under the app toolbar).

Here’s what I had using Vuetify’s components.

Vuetify’s App Toolbar + Tabs

This works great, but when you’re scrolling down, the tabs disappear and you have to go all the way up to change tabs.

I’ve searched the docs & forums but did not see anything about making the tabs bar sticky, so I decided to make it myself with CSS.

The first step is to add a class to your v-tabs, like this:

<v-tabs

    dark

    color="primary"

    show-arrows

    v-model="currentDate"

    class="fixed-tabs-bar">

    ...

</v-tabs>

Now in your CSS file, just add this rule:

.fixed-tabs-bar .v-tabs__bar {

    position: -webkit-sticky;

    position: sticky;

    top: 4rem;

    z-index: 2;

}
Vuetify’s App Toolbar + Sticky Tabs