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

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

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.
  • If the QDrawer content also has images and you want to use touch actions to close it, you might want to add draggable="false" to them, otherwise the native browser behavior might interfere in a negative way.

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.

WARNING

When QDrawer is set into overlay mode, it will force it to go into fixed position, regardless if QLayout’s “view” prop is configured with “l/r” or “L/R”. Also, if on iOS platform and QLayout is containerized, the fixed position will also be forced upon QDrawer due to platform limitations that cannot be overcome.

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

Mini to overlay

The mini-to-overlay Boolean property will always set your drawer with fixed position, regardless of your configuration from the view prop, but will occupy space on the layout only as wide as when in mini-mode.

Mini to overlay

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

Overlay mode

The overlay mode prevents the drawer from occupying space on the layout and rather hover over the page instead. This will always set your drawer with fixed position, regardless of your configuration from the view prop.

On the example below, click the menu icon to see the drawer in action. It’s best viewed on a desktop with a window of at least 500px width (this is the breakpoint that is set on this demo).

Overlay mode

QDrawer API

Loading API...
Please wait...