Vuetify v-navigation-drawer cannot overflow button

Question

I have a v-navigation-drawer and it's design must include a toggle expand button that overflows the drawer itself like so:

But for some unknown reason, I can't remove the overflow hidden property.

I tried to remove it like this:

    .v-navigation-drawer {
      overflow: auto;

      .v-navigation-drawer__content {
        overflow-x: auto;
      }
    }

No success:

Here the codepend reproducing the issue: https://codepen.io/aug-riedinger/pen/poLjJyq

Can anyone help on this?

Thanks

Answer 1

Just as kael said, you need to set the overflow property to visible for normal and mini variant. Like this:

.v-navigation-drawer--mini-variant, .v-navigation-drawer {
  overflow: visible !important;
  
}

.expand-toggle {
  position: absolute;
  height: 3rem;
  z-index: 1;
  right: -14px;
  top: 30px;
  bottom: 0;
  .v-btn {
    margin: auto;
    border: thin solid white !important;
  }
}

Answer 2

https://stackoverflow.com/a/6433475/2074736

You want visible not auto, and you also have to set overflow-y: visible for that to actually take effect.