Drawer

The drawer component creates a flexible overlay panel that provides focused workspace for forms, detailed views, or supplementary information.

import {DrawerModule} from "@qualcomm-ui/angular/drawer"

Overview

The drawer's API is similar to the Dialog component.

Examples

Placement End

The drawer's default placement is end, which maps to the right side of the screen in LTR languages and the left side in RTL languages.

import {Component} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {DrawerModule} from "@qualcomm-ui/angular/drawer"

@Component({
  imports: [DrawerModule, ButtonModule],
  selector: "drawer-placement-demo",
  template: `
    <div q-drawer-root>
      <button emphasis="primary" q-button q-drawer-trigger variant="fill">
        Open Drawer
      </button>
      <q-drawer-floating-portal>
        <div q-drawer-body>
          <button q-drawer-close-button></button>
          <h2 q-drawer-heading>Drawer Title</h2>
          <div q-drawer-description>Drawer Description</div>
        </div>

        <div q-drawer-footer>
          <button q-button q-drawer-close-trigger size="sm" variant="fill">
            Close
          </button>
        </div>
      </q-drawer-floating-portal>
    </div>
  `,
})
export class DrawerPlacementDemo {}

Placement Start

Use placement start to change the placement to the left side of the screen.

<div placement="start" q-drawer-root>

Controlled State

Set the initial visibility using the defaultOpen prop, or use open and openChanged to control the visibility manually. These props follow our controlled state pattern.

import {Component, signal} from "@angular/core"

import {ButtonModule} from "@qualcomm-ui/angular/button"
import {DrawerModule} from "@qualcomm-ui/angular/drawer"

@Component({
  imports: [DrawerModule, ButtonModule],
  selector: "drawer-controlled-state-demo",
  template: `
    <div q-drawer-root [open]="open()" (openChanged)="onOpenChange($event)">
      <button emphasis="primary" q-button q-drawer-trigger variant="fill">
        Open Drawer
      </button>
      <q-drawer-floating-portal>
        <div q-drawer-body>
          <button q-drawer-close-button></button>
          <h2 q-drawer-heading>Drawer Title</h2>
          <div q-drawer-description>Drawer Description</div>
        </div>

        <div q-drawer-footer>
          <button q-button q-drawer-close-trigger size="sm" variant="fill">
            Close
          </button>
        </div>
      </q-drawer-floating-portal>
    </div>
  `,
})
export class DrawerControlledStateDemo {
  readonly open = signal(false)

  onOpenChange(open: boolean) {
    console.debug("Drawer open changed:", open)
    this.open.set(open)
  }
}

Custom Container

Use the container prop of the <q-portal> component to render the drawer in a custom container. You'll need to override the positioner's default styles to position the drawer correctly.

Consider setting closeOnInteractOutside to false to prevent the drawer from closing when interacting outside the drawer.

import {Component} from "@angular/core"

import {PortalComponent} from "@qualcomm-ui/angular-core/portal"
import {ButtonModule} from "@qualcomm-ui/angular/button"
import {DrawerModule} from "@qualcomm-ui/angular/drawer"

@Component({
  imports: [DrawerModule, ButtonModule, PortalComponent],
  selector: "drawer-custom-container-demo",
  template: `
    <div
      closeOnEscape="false"
      closeOnInteractOutside="false"
      preventScroll="false"
      q-drawer-root
      trapFocus="false"
    >
      <div
        #containerRef
        class="border-neutral-03 relative box-border flex h-96 w-[600px] overflow-hidden border p-8"
      >
        <button emphasis="primary" q-button q-drawer-trigger variant="fill">
          Open Drawer
        </button>
      </div>

      <q-portal [container]="containerRef">
        <div class="absolute z-0 h-full w-full" q-drawer-positioner>
          <section q-drawer-content>
            <div q-drawer-body>
              <button q-drawer-close-button></button>
              <h2 q-drawer-heading>Drawer Title</h2>
              <div q-drawer-description>Drawer Description</div>
            </div>

            <div q-drawer-footer>
              <button q-button q-drawer-close-trigger size="sm" variant="fill">
                Close
              </button>
            </div>
          </section>
        </div>
      </q-portal>
    </div>
  `,
})
export class DrawerCustomContainerDemo {}

Shortcuts

<q-drawer-floating-portal>

A helper component that combines the portal, positioner, and content components. This shortcut is equivalent to:

<q-portal>
  <div q-drawer-backdrop></div>
  <div q-drawer-positioner>
    <section q-drawer-content><ng-content /></section>
  </div>
</q-portal>

API

The Drawer shares many of its props and data attributes with the Dialog component.

<q-drawer-root>

The root component that provides context for the drawer and its parts.

Prop	Type	Default
aria-label Human-readable label for the dialog, used when the dialog title is not rendered	string
closeOnEscape Whether to close the dialog when the escape key is pressed	boolean	true
closeOnInteractOutside Whether to close the dialog when the outside is clicked	boolean	true
defaultOpen The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.	boolean
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
emphasis The style variant of the drawer's indicator.	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'	'neutral'
finalFocusEl Element to receive focus when the dialog is closed	() => HTMLElement
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
immediate Whether to synchronize the present change immediately or defer it to the next frame.	boolean	false
initialFocusEl Element to receive focus when the dialog is opened	() => HTMLElement
lazyMount When true, the component will not be rendered in the DOM until it becomes visible or active.	boolean	false
modal Whether to prevent pointer interaction outside the element and hide all content below it	boolean	true
open The controlled open state of the dialog	boolean
persistentElements The persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event	Array< () => Element >
placement The horizontal placement of the drawer within the viewport.	\| 'start' \| 'end'	'end'
present The controlled presence of the node.	boolean
preventScroll Whether to prevent scrolling behind the dialog when it's opened	boolean	true
restoreFocus Whether to restore focus to the element that had focus before the dialog was opened	boolean	true
role The dialog's role	\| 'dialog' \| 'alertdialog'	'dialog'
scrollBehavior Defines the scroll behavior of the drawer content when modal content exceeds viewport height. `'inside'`: The modal and backdrop create an internal scroll area within the modal. `'outside'`: The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.	\| 'inside' \| 'outside'	'outside'
size The size of the drawer's content area and fonts. A smaller size uses less horizontal space.	'sm' \| 'md'	'sm'
skipAnimationOnMount Whether to allow the initial presence animation.	boolean	false
trapFocus Whether to trap focus inside the dialog when it's opened	boolean	true
unmountOnExit When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.	boolean	false
(escapeKeyDown) Function called when the escape key is pressed	KeyboardEvent
(exitCompleted) Function called when the animation ends in the closed state	void
(focusOutside) Function called when the focus is moved outside the component	CustomEvent<{ event?: E }>
(interactOutside) Function called when an interaction happens outside the component	\| CustomEvent<{event?: E}> \| CustomEvent<{event?: E}>
(openChanged) Fired when the dialog opens or closes.	boolean
(pointerDownOutside) Function called when the pointer is pressed down outside the component	CustomEvent<{ event?: E }>
(requestDismissed) Function called when this layer is closed due to a parent layer being closed	CustomEvent<{ originalIndex: number originalLayer: HTMLElement targetIndex: number targetLayer: HTMLElement }>

aria-label

Type

string

Description

Human-readable label for the dialog, used when the dialog title is not rendered

closeOnEscape

Type

boolean

Description

Whether to close the dialog when the escape key is pressed

closeOnInteractOutside

Type

boolean

Description

Whether to close the dialog when the outside is clicked

defaultOpen

Type

boolean

Description

The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

emphasis

Type

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

Description

The style variant of the drawer's indicator.

finalFocusEl

Type

() => HTMLElement

Description

Element to receive focus when the dialog is closed

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

immediate

Type

boolean

Description

Whether to synchronize the present change immediately or defer it to the next frame.

initialFocusEl

Type

() => HTMLElement

Description

Element to receive focus when the dialog is opened

lazyMount

Type

boolean

Description

When true, the component will not be rendered in the DOM until it becomes visible or active.

modal

Type

boolean

Description

Whether to prevent pointer interaction outside the element and hide all content below it

open

Type

boolean

Description

The controlled open state of the dialog

persistentElements

Type

Array<
  () => Element
>

Description

The persistent elements that:
- should not have pointer-events disabled
- should not trigger the dismiss event

placement

Type

| 'start'
| 'end'

Description

The horizontal placement of the drawer within the viewport.

present

Type

boolean

Description

The controlled presence of the node.

preventScroll

Type

boolean

Description

Whether to prevent scrolling behind the dialog when it's opened

restoreFocus

Type

boolean

Description

Whether to restore focus to the element that had focus before the dialog was opened

role

Type

| 'dialog'
| 'alertdialog'

Description

The dialog's role

scrollBehavior

Type

| 'inside'
| 'outside'

Description

Defines the scroll behavior of the drawer content when modal content exceeds viewport height.

'inside': The modal and backdrop create an internal scroll area within the modal.
'outside': The modal and backdrop move with the page scroll instead of creating an internal scroll area within the modal.

size

Type

'sm' | 'md'

Description

The size of the drawer's content area and fonts. A smaller size uses less horizontal space.

skipAnimationOnMount

Type

boolean

Description

Whether to allow the initial presence animation.

trapFocus

Type

boolean

Description

Whether to trap focus inside the dialog when it's opened

unmountOnExit

Type

boolean

Description

When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.

(escapeKeyDown)

Type

KeyboardEvent

Description

Function called when the escape key is pressed

(exitCompleted)

Type

void

Description

Function called when the animation ends in the closed state

(focusOutside)

Type

CustomEvent<{
  event?: E
}>

Description

Function called when the focus is moved outside the component

(interactOutside)

Type

| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>

Description

Function called when an interaction happens outside the component

(openChanged)

Type

boolean

Description

Fired when the dialog opens or closes.

(pointerDownOutside)

Type

CustomEvent<{
  event?: E
}>

Description

Function called when the pointer is pressed down outside the component

(requestDismissed)

Type

CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>

Description

Function called when this layer is closed due to a parent layer being closed

<q-drawer-floating-portal>

A helper component that combines the portal, positioner, and content components.

Prop	Type
container Override the element that the portal is attached to.	\| HTMLElement \| ElementRef<HTMLElement>
disabled Set this to true to disable portalling behavior, causing the children to be rendered as-is.	boolean

container

Type

| HTMLElement
| ElementRef<HTMLElement>

Description

Override the element that the portal is attached to.

disabled

Type

boolean

Description

Set this to true to disable portalling behavior, causing the children to be rendered as-is.

q-drawer-backdrop

The backdrop that overlays the content behind the drawer.

Attribute / Property	Value
`class`	'qui-dialog__backdrop'
`data-dialog-part`	'backdrop'
`data-state`	\| 'open' \| 'closed'
`hidden`	boolean

class

Value

'qui-dialog__backdrop'

data-dialog-part

Value

'backdrop'

data-state

Value

| 'open'
| 'closed'

hidden

Value

boolean

q-drawer-positioner

A container for the drawer content that handles positioning.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-drawer__positioner'
`data-dialog-part`	'positioner'
`data-placement`	\| 'start' \| 'end'
`style`	CSSProperties

class

Value

'qui-drawer__positioner'

data-dialog-part

Value

'positioner'

data-placement

Value

| 'start'
| 'end'

style

Value

CSSProperties

q-drawer-content

A container for the drawer contents.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-drawer__content'
`data-dialog-part`	'content'
`data-placement`	\| 'start' \| 'end'
`data-size`	'sm' \| 'md'
`data-state`	\| 'open' \| 'closed'
`hidden`	boolean
`tabIndex`	-1

class

Value

'qui-drawer__content'

data-dialog-part

Value

'content'

data-placement

Value

| 'start'
| 'end'

data-size

Value

'sm' | 'md'

data-state

Value

| 'open'
| 'closed'

hidden

Value

boolean

tabIndex

Value

-1

q-drawer-body

The main content of the drawer. Container for the heading, description, indicator, and primary content of the drawer.

Prop	Type
hideIndicatorIcon Hides the indicator icon.	boolean

hideIndicatorIcon

Type

boolean

Description

Hides the indicator icon.

Attribute / Property	Value
`class`	'qui-dialog__body'
`data-dialog-part`	'body'
`data-size`	'sm' \| 'md'

q-drawer-heading

A heading that labels the drawer.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-dialog__heading'
`data-dialog-part`	'heading'
`data-size`	'sm' \| 'md'

The footer section of the drawer. Typically contains action buttons.

Attribute / Property	Value
`class`	'qui-dialog__footer'
`data-dialog-part`	'footer'
`data-size`	'sm' \| 'md'

q-drawer-indicator-icon

An icon that indicates the drawer's status.

Attribute / Property	Value
`class`	'qui-dialog__indicator-icon'
`data-emphasis`	\| 'info' \| 'success' \| 'warning' \| 'danger' \| 'neutral'
`data-size`	'sm' \| 'md'

class

Value

'qui-dialog__indicator-icon'

data-emphasis

Value

| 'info'
| 'success'
| 'warning'
| 'danger'
| 'neutral'

data-size

Value

'sm' | 'md'

q-drawer-close-button

A button that closes the drawer.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

Attribute / Property	Value
`class`	'qui-dialog__close-button'
`data-dialog-part`	'close-trigger'

Last updated on Apr 24, 2026 by Ryan Bower

Divider

File Input