Layout Drawer     

QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer. If you haven’t already, please read QLayout documentation page first.


Edit /quasar.conf.js:

framework: {
components: [

Basic Usage

<q-layout-drawer side="left">
<!-- drawer content -->

QLayoutDrawer Vue Properties

Vue PropertyTypeDescription
sideStringOne of ‘left’ or ‘right’, depending on the Drawer position on Layout.
overlayBooleanOverlay mode
breakpointNumberBreakpoint (in pixels, defining window width) at which point the Drawer will be placed directly over the layout and won’t act as a mobile drawer anymore. Default is 992 (up to “sm”, including).
behaviorStringOne of ‘default’, ‘desktop’, ‘mobile’. The last two override the breakpoint and makes Drawer act only as on desktop or only as on mobile modes, regardless of window width.
no-hide-on-route-changeBoolean(Quasar v0.15.7+) Disable hiding of Drawer during route changes.
no-swipe-openBooleanDisable ability to open Drawer by touch actions.
no-swipe-closeBooleanDisable ability to close Drawer by touch actions. Useful if you have components in your Drawer which require touch actions. The backdrop will still work with touch actions.
content-styleObjectCSS Style in Object format for the Drawer container element.
content-classString/Object/ArrayCSS classes for the Drawer container element.

Styling Examples

:content-style="{padding: '20px'}"

The Vue Object notation for content-style is mandatory.

:content-class="['bg-grey-3', 'q-pa-sm']"

The Breakpoint

If you’ve played with the layout in desktop mode, you might notice how the left and right sides / drawers magically hide, as you decrease the screen width. This is part of the smart responsiveness designed into Quasar’s layout component.

If you’d like to control how the left and right side / drawers work, you have a prop called breakpoint on each QLayoutDrawer. This value represents the minimum size of the screen in pixels, before the Drawer is forced to float above the Layout. This is a fantastic and important function in maximizing screen real estate for smaller devices.

Also take a look at the behavior property if you want the Drawer to act only as on a narrow screen or only as on a wide screen, effectively disable the breakpoint.

Using v-model

There’s the possibility to use v-model to control the state of Drawer (opened/showing and closed/hidden).

<q-layout-drawer v-model="drawer">
@click="drawer = !drawer"

export default {
data () {
return {
// "false" means hidden
// "true" means visible
drawer: true

Please note that the model can instantly get changed upon Drawer being rendered if the breakpoint requires it.