Is there anyway to remove the shadow, or force vuetify menu to fully align with the left side of the screen?

Question

I am trying to use vuetify menu in a sidebar navigation. I would like for the menu to align perfectly to the left side of the screen. Instead what I am getting is the menu is insisting to be positioned 12px away from the edge of my screen and wrecking my alignment.

Is there a way to disable the shadow or to force the alignment? The left: 12px is specified directly on the element's style so CSS has no effect.

I have tried this but no luck:

<v-menu offset-y nudge-left="-12" flat>

https://codepen.io/RuttyJ/pen/BevNmy?editors=1010

Any ideas?

Update: Made some progress: https://codepen.io/anon/pen/WBLMob

This achieves the effect but requires the override of the menu nudge on a global level to 0px !important.

Answer 1

You can use content-class like:

<v-menu content-class="elevation-0">

Answer 2

You can use the elevation directive to remove the shadow.

Just add elevation="0" to your element.

https://vuetifyjs.com/en/styles/elevation

Answer 3

You can use $menu-content-elevation: 0;.

SASS variables

Available menu component SASS variables