Quaff

QDrawer

Drawers place navigation or supporting content beside the page. They can share space with content or overlay it, adapting to smaller screens.

info QDrawer API Source
interface QDrawerProps extends HTMLAttributes<HTMLDivElement>
behavior
?: QDrawerBehaviorOptions = "default"
Controls responsive behavior: "default" follows the breakpoint, "mobile" uses a modal drawer and "desktop" uses a standard drawer.
bordered
?: boolean = false
Whether the component should have a border.
breakpoint
?: number = BREAKPOINTS.md
The viewport width below which the drawer uses modal behavior and swipe gestures. Defaults to the MD3 expanded breakpoint; at 840px the drawer becomes standard.
elevated
?: boolean = undefined
Determines whether the drawer has an elevated effect. (not supported yet)
noSwipe
?: boolean = false
Determines whether swipe gestures opening the drawer should be disabled or not.
overlay
?: boolean = false
Determines whether the drawer should behave like an overlay (opening above the content) or not (pushing the content while opening).
persistent
?: boolean = false
Prevents dismissal by clicking outside, pressing Escape or swiping. Modal focus stays inside the drawer.
showIfAbove
?: boolean = undefined
Determines whether the drawer should be shown if the viewport width is above the specified breakpoint. (not supported yet)
side
?: QDrawerSideOptions = "start"
Position of the drawer. "start" and "end" follow its direction; "left" and "right" stay physical.
swipeThreshold
?: `${number}%` = "30%"
The threshold in percentage of the drawer width that must be swiped for the drawer to snap open/close. This is only applicable if swipe gestures are enabled.
value
?: boolean = $bindable(false)
The bound value of the component.
width
?: number = 360
Width of the drawer in pixels. Standalone drawers also support CSS-unit strings at runtime.

Usage

Basic Drawer
QDrawer is a side navigation component that can be toggled open and closed. It's typically used for navigation menus, filtering options, or additional content. The drawer is controlled with the value prop which determines if it's open or closed. Modal drawers keep keyboard focus inside and return it when closed. Escape closes non-persistent drawers. Give the drawer an aria-label or aria-labelledby.
Navigation
home
Home
settings
Settings
App Title

Click the menu button to toggle the drawer:

Expandable navigation
Group related pages under an expandable heading. Expand Projects to choose a workspace, or collapse it to keep the navigation compact. See QNavItem and QNavGroup for navigation options.
Workspace
Website

Open the navigation to switch between workspace pages.

Drawer Sides
The default side="start" opens from the left in LTR and the right in RTL. side="end" uses the opposite edge. In QLayout, use the matching drawerStart or drawerEnd snippet. Explicit left and right stay fixed when direction changes.
Left Drawer

This drawer opens from the left side.

Right Drawer

This drawer opens from the right side.

App Title

Click the buttons to toggle the drawers:

Overlay Mode
By default, QDrawer behaves as a standard navigation drawer and moves the content when opened. With the overlay prop, it becomes a modal drawer with a scrim and does not affect the layout.
Overlay Drawer

Click the menu button to open the overlay drawer:

Notice how the content doesn't move when the drawer opens.

Persistent Drawer
A persistent drawer won't close when clicking outside it. This is useful when you need the drawer to stay open until explicitly closed by the user.
Persistent Drawer

This drawer won't close when clicking outside it. Try it!

You need to use the button below or in the header to close it.

Persistent Drawer

Click the menu button to open the persistent drawer:

Try clicking here - the drawer will stay open.

Bordered Drawer
You can add a border to the drawer using the bordered prop, which helps visually separate it from the main content.
Bordered Drawer

This drawer has a border on its edge.

Bordered Drawer

Click the menu button to toggle the bordered drawer:

Custom Width
You can customize the width of the drawer using the width prop. The default width is 360px. If specified as a number, it's interpreted as pixels.
Wide Drawer (400px)

This drawer has a custom width of 400px instead of the default 360px.

Custom Width

Click the menu button to toggle the wide drawer:

Programmatic Control
QDrawer provides methods for programmatic control: show(), hide(), and toggle(). These can be accessed by binding to the component with bind:this.
Drawer Content

This drawer is controlled programmatically.

Programmatic Control

Control the drawer with these buttons:

Working with QLayout
QDrawer is designed to work with QLayout. The view prop of QLayout controls how the drawer relates to headers and footers. The format "hHh LpR fFf" defines the layout structure, where L and R represent left and right drawers, and their casing determines how they interact with other elements.
Navigation
home
Home
person
Profile
App with Layout
Footer content

This example shows a complete layout with:

  • Header at the top
  • Navigation drawer on the left
  • Footer at the bottom
Privacy Policy