Layout Drawer

QLayout allows you to configure your views as a 3x3 matrix, containing optional left-side and/or right-side Drawers. If you haven’t already, please read QLayout documentation page first.

QDrawer is the sidebar part of your QLayout.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QDrawer'
    ]
  }
}

Layout Builder

Scaffold your layout(s) by clicking on the button below.

Layout Builder

Usage

TIP

Since QDrawer needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QDrawer.

WARNING

By default, QDrawer has touch actions attached to it. If this interferes with your drawer content components, disable it by specifying the Boolean no-swipe-close property.

Basic

Basic



Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.

With navigation menu



Seamless menu



Header Picture



Mini-mode

Drawer can operate in two modes: ‘normal’ and ‘mini’, and you can switch between them by using the Boolean mini property on QLayoutDrawer.

WARNING

Please note that mini mode does not apply when in mobile behavior.

There are some CSS classes that will help you customize the drawer when dealing with “mini” mode. These are very useful especially when using the “click” trigger:

CSS ClassDescription
q-mini-drawer-hideHide when drawer is in “mini” mode.
q-mini-drawer-onlyShow only when drawer is in “mini” mode.

You can also write your own CSS classes based on the fact that QLayoutDrawer has q-layout-drawer-normal CSS class when in “normal” mode and q-layout-drawer-mini when in “mini” mode. Also, when drawer is in “mobile” behavior, it gets q-layout-drawer-mobile CSS class.

Mouseover/mouseout trigger

Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.

Mini-mode with mouseover/mouseout trigger



Click trigger

In the example below, when in “mini” mode, if the user clicks on Drawer then we switch to normal mode.

Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.

Mini-mode with click trigger



Slots

By default, when in “mini” mode, Quasar CSS hides a few DOM elements to provide a neat narrow drawer. But there may certainly be use-cases where you need a deep tweak. You can use the “mini” Vue slot of QLayoutDrawer just for that. The content of this slot will replace your drawer’s default content when in “mini” mode.

Mini-mode with slot



QDrawer API