VuetifyJS - Scrolling v-navigation-drawer

Question

I am new to VueJs and I started working on my first project which requires me to have a side panel (drawer) to serve as a navigation bar and it will always be visible.

So far so good it is done and it looks exactly as I wanted it.

The problem is that each time I put a lot of links the drawer doesn’t scroll in order to see all the links I have put there.

I have tried with css but nothing happens. Does anyone have any hint on what I should do?

I just need the drawer to be scrollable when links exceed the page or when the screen it’s small.

What I did is that I enclosed my drawer in a div with a class"scrollable" and added the below css:

.scrollable{ height:100%; overflow:auto;}

I also tried this as it was the closest thing I could find to my problem

Answer 1

I was facing the same issue because of the 'absolute' keyword in the v-navigation-drawer. Try removing it and it might work.

<v-navigation-drawer class="blue-grey lighten-5 height-app" v-model="drawer" temporary app width="310"> </v-navigation-drawer>

Answer 2

Navigation drawers should be scrollable if you add the app option as per the documentation

I still had the problem once where I could not add the app option to the drawer since I had two drawers side by side.

I just added this style to my drawer and it did the trick :

calc(100% - 48px); height: 100vh;