The Quasar Drawer (also known as a Sidebar) is the element on the left side or right side of your screen, usually used for Navigation, which gets hidden on smaller screens (and can be activated by swiping them into view from the edge of the screen or by clicking/tapping on menu buttons) and is shown alongside the page content on wide enough screens.
There are two types of Drawers: left-side or right-side. Check the HTML markup to learn how to declare each of them.
In your Layout template, you can declare up to two drawers, but they must differ in type (one must be left-side and one right-side) otherwise they’ll be one on top of each other.
right-side attribute only places the Drawer in the right side of screen when it is hidden and can be swiped in. If the window is wide enough your Drawer will be displayed along your page view, depending on where you’ve included
<div class="layout-view">, which is before or after (which translates to left or right to the page view). So it is possible to place Drawer content on the left side on wide enough windows and on right-side (waiting to be swiped in) on smaller windows.
|Boolean||(Optional) User can swipe the Drawer into view from the right side of the screen.|
|Boolean||(Optional) By default, Drawers get hidden on smaller screens but they get displayed on wide enough ones. Adding |
|Number||Specify opacity for the backdrop as a floating Number between 0 and 1.|
|Optional Func ||Open Drawer (when on narrow window).|
|Optional Func ||Close Drawer (when on narrow window).|
|Optional Func ||Toggle open/close Drawer (when on narrow window).|
|Boolean ||Open or close (based on truthiness of |
The Drawer component gets along very well with Quasar Lists. You can use Lists to define the contents of the Drawer. To differentiate how a Drawer List looks like, use the special CSS class
platform-delimiter on the list DOM node.
There’s also a helper Web Component called
<q-drawer-link> which generates under the covers the HTML for a List item that represents a link. Handle click/tap events with
v-link Vue Router directive.
<q-drawer-link> inside of a List. It has two Vue props:
to (which can be used as you would with a
v-link; documentation on
v-link can be read here).
icon attribute which also adds an icon to your link list item.
As you read above, the Drawer can be brought into view by either swiping from the edge of the screen or by clicking on menu buttons.
You can make DOM elements open a drawer. Place a reference on the Drawer and then call “open()” method on a DOM element (usually a button) which will open it.
Notice the CSS class
hide-on-drawer-visiblewhich automatically hides the button when Drawer is already visible on screen (like on wide enough windows) and hides it back when screen is narrow.
From a user’s perspective, it’s best to put those DOM elements that open up drawers in a Layout header Toolbar. Quick example below.