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:









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

3 thoughts on “How to make a sticky tabs bar with Vuetify?

  1. Thanks so much for this! I needed the same effect. I usually find solutions on StackOverflow, but couldn’t find the answer there for this problem.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.