CODEWITHSUNDEEP
htmlvuetify.js
user2993349
user2993349

Reputation: 501

Vuetify - Changing default navigation-drawer width

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?

Upvotes: 11

Views: 21745

Answers (2)

Terry
Terry

Reputation: 66133

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">

Upvotes: 27

DieSeL
DieSeL

Reputation: 131

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

Upvotes: 7

Related Questions