Vuetify — Complex Drawers. Adding drawers with various layouts.
By: John Au-Yeung
Tags: Programming, Web Development, Technology, Software Development, JavaScript

Vuetify is a popular UI framework for Vue apps.

In this article, we’ll look at how to work with the Vuetify framework.

Expand on Hover

We can make a nav drawer than expands on hover.

For example, we can write:

<template>

<v-row>

<v-col cols="12">

<div class="ma-12 pa-12">

<template>

<v-card>

<v-navigation-drawer permanent expand-on-hover>

<v-list>

<v-list-item class="px-2">

<v-list-item-avatar>

<v-img src="https://randomuser.me/api/portraits/women/85.jpg"></v-img>

</v-list-item-avatar>

</v-list-item> <v-list-item link>

<v-list-item-content>

<v-list-item-title class="title">Jane Smith</v-list-item-title>

<v-list-item-subtitle>jane@example.com</v-list-item-subtitle>

</v-list-item-content>

</v-list-item>

</v-list> <v-divider></v-divider> <v-list nav dense>

<v-list-item link>

<v-list-item-icon>

<v-icon>mdi-folder</v-icon>

</v-list-item-icon>

<v-list-item-title>My Files</v-list-item-title>

</v-list-item>

<v-list-item link>

<v-list-item-icon>

<v-icon>mdi-account-multiple</v-icon>

</v-list-item-icon>

<v-list-item-title>Shared with me</v-list-item-title>

</v-list-item>

<v-list-item link>

<v-list-item-icon>

<v-icon>mdi-star</v-icon>

</v-list-item-icon>

<v-list-item-title>Starred</v-list-item-title>

</v-list-item>

</v-list>

</v-navigation-drawer>

</v-card>

</template>

</div>

</v-col>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

drawer: null,

}),

};

</script>

We add the v-navigation-drawer with the expand-on-hover prop to make it expand on hover.

The permanent prop makes it always show.

The v-list-item components have menu entries.

Nav Drawer Backgrounds

We can apply a custom background on the drawer.

We need to customize a v-img properties in the img slot.

For instance, we can write:

<template>

<v-row>

<v-col cols="12">

<v-card class="mx-auto" height="300" width="300">

<v-navigation-drawer

absolute

dark

src="https://cdn.vuetifyjs.com/images/backgrounds/bg-2.jpg"

width="100%"

permanent

>

<v-list>

<v-list-item v-for="([icon, text], i) in items" :key="i" link>

<v-list-item-icon>

<v-icon>{{ icon }}</v-icon>

</v-list-item-icon> <v-list-item-content>

<v-list-item-title>{{ text }}</v-list-item-title>

</v-list-item-content>

</v-list-item>

</v-list>

</v-navigation-drawer>

</v-card>

</v-col>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

drawer: null,

items: [

["mdi-email", "Email"],

["mdi-account-supervisor-circle", "Account"],

["mdi-clock-start", "Clock"],

],

}),

};

</script>

The v-navigation-drawer has the props to change the styles.

The src prop has the URL for the background image.

Combined Drawers

We can have a nested drawer that shows side by side with the main drawer.

For example, we can write:

<template>

<v-row>

<v-col cols="12">

<v-card class="mx-auto" height="300" width="330">

<v-navigation-drawer permanent width="100%">

<v-row class="fill-height" no-gutters>

<v-navigation-drawer dark mini-variant mini-variant-width="56" permanent>

<v-list-item class="px-2">

<v-list-item-avatar>

<v-img src="https://randomuser.me/api/portraits/women/1.jpg"></v-img>

</v-list-item-avatar>

</v-list-item> <v-divider></v-divider> <v-list dense nav>

<v-list-item v-for="item in items" :key="item.title">

<v-list-item-action>

<v-icon>{{ item.icon }}</v-icon>

</v-list-item-action> <v-list-item-content>

<v-list-item-title>{{ item.title }}</v-list-item-title>

</v-list-item-content>

</v-list-item>

</v-list>

</v-navigation-drawer> <v-list class="grow">

<v-list-item v-for="link in links" :key="link" link>

<v-list-item-title v-text="link"></v-list-item-title>

</v-list-item>

</v-list>

</v-row>

</v-navigation-drawer>

</v-card>

</v-col>

</v-row>

</template>

<script>

export default {

name: "HelloWorld",

data: () => ({

drawer: null,

items: [

{ title: "Home", icon: "dashboard" },

{ title: "About", icon: "question_answer" },

],

links: ["Home", "Contacts", "Settings"],

mini: true,

}),

};

</script>

The v-navigation-drawer outside holds another v-navigation-drawer inside.

The one inside is the main nav drawer and the one outside holds extra information.

Conclusion

We can have various kinds of drawers with different kinds of items and nesting.