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.

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;

}