Vuetify - Changing default navigation-drawer width

Question

Apparently Vuetify has 300px as the default width for a navigation drawer.

Even if I change the initial width to be different

<v-navigation-drawer id="add-expense-menu" ... style="width: 325px">

the transform applied to hide the drawer is still 300px, so a part of it sticks out.

Is there a way to change the default width of this component?

Answer 1

Don't set the styles using inline CSS. Instead, make use of the props made available to the component, and bind your desired width to it, i.e.:

<v-navigation-drawer v-bind:width="325">

If you are familiar with shorthands, use :width="325" will work, i.e.

<v-navigation-drawer :width="325">

Answer 2

You can pass the width as a prop directly to v-navigation-drawer as of latest versions of vuetify. This allows, fortunately, the usage of percentage too:

<v-navigation-drawer width="325"> //pixels
<v-navigation-drawer width="25%"> //percentage

You can back this up in https://vuetifyjs.com/en/components/navigation-drawers