Feedback

Drawer

Copy page

View as Markdown

Open in ChatGPT

Open in Claude

A panel that slides in from an edge of the screen.

Usage#

app.component.ts

import { WdsDrawerComponent } from '@wds/angular/drawer';

Examples#

Default#

show() and close() open and close the drawer; heading and description name and describe it. With handle, drag the handle or the header toward the edge (or flick it) to close. Buttons in the footer slot are stacked.

Open drawer

Drag the handle or the header down to close the drawer.

Submit

Cancel

Show code

drawer-default.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';

@Component({
  selector: 'app-drawer-default-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <wds-button variant="outline" (click)="drawer.show()">Open drawer</wds-button>
    <wds-drawer #drawer handle heading="Are you absolutely sure?" description="This action cannot be undone.">
      <p class="m-0 text-sm text-muted-foreground">Drag the handle or the header down to close the drawer.</p>
      <wds-button slot="footer" (click)="drawer.close()">Submit</wds-button>
      <wds-button slot="footer" variant="outline" (click)="drawer.close()">Cancel</wds-button>
    </wds-drawer>
  `,
})
export class DrawerDefaultDemo {}

Position#

placement sets the edge: top, right, bottom (default) or left.

top

right

bottom

left

Close it with Escape, a click on the backdrop or the button.

Show code

drawer-position.ts

import { Component, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';
import type { WdsDrawerPlacement } from '@wds/core/drawer';

@Component({
  selector: 'app-drawer-position-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-2">
      @for (p of placements; track p) {
        <wds-button variant="outline" (click)="placement.set(p); drawer.show()">{{ p }}</wds-button>
      }
    </div>
    <wds-drawer #drawer [placement]="placement()" heading="Drawer" [description]="'Slides in from the ' + placement() + ' edge.'">
      <p class="m-0 text-sm text-muted-foreground">Close it with Escape, a click on the backdrop or the button.</p>
      <wds-button slot="footer" (click)="drawer.close()">Close</wds-button>
    </wds-drawer>
  `,
})
export class DrawerPositionDemo {
  protected readonly placements: WdsDrawerPlacement[] = ['top', 'right', 'bottom', 'left'];
  protected readonly placement = signal<WdsDrawerPlacement>('bottom');
}

Size#

--wds-drawer-size sets the width of a left or right drawer, or the height of a top or bottom one.

Small (20rem)

Large (40rem)

Drawer content.

Show code

drawer-size.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';

@Component({
  selector: 'app-drawer-size-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <div class="flex flex-wrap justify-center gap-2">
      <wds-button variant="outline" (click)="small.show()">Small (20rem)</wds-button>
      <wds-button variant="outline" (click)="large.show()">Large (40rem)</wds-button>
    </div>
    <wds-drawer #small placement="right" heading="Small drawer" description="20rem wide." class="[--wds-drawer-size:20rem]">
      <p class="m-0 text-sm text-muted-foreground">Drawer content.</p>
    </wds-drawer>
    <!-- min() keeps a margin on narrow screens. -->
    <wds-drawer #large placement="right" heading="Large drawer" description="40rem wide." class="[--wds-drawer-size:min(40rem,100vw_-_16px)]">
      <p class="m-0 text-sm text-muted-foreground">Drawer content.</p>
    </wds-drawer>
  `,
})
export class DrawerSizeDemo {}

Nested#

A drawer can open another one on top; Escape and the backdrop close only the top drawer.

Open drawer

Open nested drawer

Back

Show code

drawer-nested.ts

import { Component } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';

@Component({
  selector: 'app-drawer-nested-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <wds-button variant="outline" (click)="outer.show()">Open drawer</wds-button>
    <wds-drawer #outer handle heading="First level" description="Open the next drawer from here.">
      <wds-button slot="footer" (click)="inner.show()">Open nested drawer</wds-button>
    </wds-drawer>
    <wds-drawer #inner handle heading="Second level" description="Escape closes only this drawer.">
      <wds-button slot="footer" variant="outline" (click)="inner.close()">Back</wds-button>
    </wds-drawer>
  `,
})
export class DrawerNestedDemo {}

modal set to false (a property) opens the drawer without a backdrop: the page stays usable and focus is not trapped.

Open drawer

Clicked 0×

Show code

drawer-non-modal.ts

import { Component, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';

@Component({
  selector: 'app-drawer-non-modal-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <div class="flex flex-wrap items-center justify-center gap-2">
      <wds-button variant="outline" (click)="drawer.show()">Open drawer</wds-button>
      <wds-button variant="ghost" (click)="clicks.set(clicks() + 1)">Clicked {{ clicks() }}×</wds-button>
    </div>
    <wds-drawer #drawer [modal]="false" placement="right" heading="Non-modal" description="The page below stays usable.">
      <wds-button slot="footer" variant="outline" (click)="drawer.close()">Close</wds-button>
    </wds-drawer>
  `,
})
export class DrawerNonModalDemo {
  protected readonly clicks = signal(0);
}

Snap points#

snapPoints lets a top or bottom drawer stop at several heights (fractions of the screen, pixels or strings such as 320px). Dragging moves between them and fires wds-snap-change; snapPoint sets the active one.

Open drawer

Snap point: 0.3

Row 1

Row 2

Row 3

Row 4

Row 5

Row 6

Row 7

Row 8

Row 9

Row 10

Row 11

Row 12

Row 13

Row 14

Row 15

Row 16

Row 17

Row 18

Row 19

Row 20

Row 21

Row 22

Row 23

Row 24

Row 25

Row 26

Row 27

Row 28

Row 29

Row 30

Show code

drawer-snap-points.ts

import { Component, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDrawerComponent } from '@wds/angular/drawer';
import type { WdsDrawerSnapPoint } from '@wds/core/drawer';

@Component({
  selector: 'app-drawer-snap-points-demo',
  imports: [WdsButtonComponent, WdsDrawerComponent],
  template: `
    <div class="flex flex-wrap items-center justify-center gap-3">
      <wds-button variant="outline" (click)="drawer.show()">Open drawer</wds-button>
      <span class="text-sm text-muted-foreground">Snap point: {{ snapPoint() }}</span>
    </div>
    <wds-drawer
      #drawer
      handle
      heading="Snap points"
      description="Drag up or down: 30%, 60% or full height."
      [snapPoints]="snapPoints"
      [snapPoint]="snapPoint()"
      (wdsSnapChange)="snapPoint.set($event.snapPoint)"
    >
      @for (i of rows; track i) {
        <p>Row {{ i }}</p>
      }
    </wds-drawer>
  `,
})
export class DrawerSnapPointsDemo {
  protected readonly snapPoints: WdsDrawerSnapPoint[] = [0.3, 0.6, 1];
  protected readonly snapPoint = signal<WdsDrawerSnapPoint>(0.3);
  protected readonly rows = Array.from({ length: 30 }, (_, i) => i + 1);
}

Responsive#

A dialog on wide screens and a drawer from the bottom on narrow ones, chosen with matchMedia.

Edit profile

Make changes to your profile here.

Save changes

Make changes to your profile here.

Save changes

Cancel

Show code

drawer-responsive.ts

import { Component, afterNextRender, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WdsDialogComponent } from '@wds/angular/dialog';
import { WdsDrawerComponent } from '@wds/angular/drawer';

@Component({
  selector: 'app-drawer-responsive-demo',
  imports: [WdsButtonComponent, WdsDialogComponent, WdsDrawerComponent],
  template: `
    <wds-button variant="outline" (click)="isDesktop() ? dialog.show() : drawer.show()">Edit profile</wds-button>
    <wds-dialog #dialog heading="Edit profile" description="On a wide screen: a dialog.">
      <p class="m-0 text-sm text-muted-foreground">Make changes to your profile here.</p>
      <wds-button slot="footer" (click)="dialog.close()">Save changes</wds-button>
    </wds-dialog>
    <wds-drawer #drawer handle heading="Edit profile" description="On a narrow screen: a drawer from the bottom.">
      <p class="m-0 text-sm text-muted-foreground">Make changes to your profile here.</p>
      <wds-button slot="footer" (click)="drawer.close()">Save changes</wds-button>
      <wds-button slot="footer" variant="outline" (click)="drawer.close()">Cancel</wds-button>
    </wds-drawer>
  `,
})
export class DrawerResponsiveDemo {
  protected readonly isDesktop = signal(true);

  constructor() {
    // matchMedia exists only in the browser (not during prerendering).
    afterNextRender(() => {
      const query = window.matchMedia('(min-width: 768px)');
      this.isDesktop.set(query.matches);
      query.addEventListener('change', (e) => this.isDesktop.set(e.matches));
    });
  }
}

Service#

In Angular, WdsDrawerService.open() creates the drawer from a component: data goes to the component through WDS_OVERLAY_DATA, okText / cancelText add footer buttons, and the value returned by onOk comes out of closed. HTML and React have no service, so their tabs show the same drawer declared in the markup.

Set goal

Goal: 350 calories/day

Show code

drawer-service.ts

import { Component, inject, signal } from '@angular/core';
import { WdsButtonComponent } from '@wds/angular/button';
import { WDS_OVERLAY_DATA, WdsDrawerService } from '@wds/angular/drawer';

/** Content of the drawer: any component. */
@Component({
  selector: 'app-goal-panel',
  imports: [WdsButtonComponent],
  template: `
    <div class="flex items-center justify-center gap-4">
      <wds-button variant="outline" size="icon" shape="circle" label="Decrease" (click)="goal.set(goal() - 10)">−</wds-button>
      <div class="min-w-[5ch] text-center text-5xl font-bold" aria-live="polite">{{ goal() }}</div>
      <wds-button variant="outline" size="icon" shape="circle" label="Increase" (click)="goal.set(goal() + 10)">+</wds-button>
    </div>
  `,
})
export class GoalPanel {
  // config.data of open()
  readonly goal = signal(inject<{ goal: number }>(WDS_OVERLAY_DATA).goal);
}

@Component({
  selector: 'app-drawer-service-demo',
  imports: [WdsButtonComponent],
  template: `
    <div class="flex flex-wrap items-center justify-center gap-3">
      <wds-button variant="outline" (click)="setGoal()">Set goal</wds-button>
      <span class="text-sm text-muted-foreground">Goal: {{ goal() }} calories/day</span>
    </div>
  `,
})
export class DrawerServiceDemo {
  private readonly drawers = inject(WdsDrawerService);
  protected readonly goal = signal(350);

  protected setGoal(): void {
    this.drawers
      .open<GoalPanel, number>({
        title: 'Move goal',
        description: 'Set your daily activity goal.',
        content: GoalPanel,
        data: { goal: this.goal() },
        handle: true,
        okText: 'Submit',
        cancelText: 'Cancel',
        // The value returned here is emitted by closed.
        onOk: (panel) => panel?.goal(),
      })
      .closed.subscribe((value) => {
        // undefined: closed with Cancel, Escape, the backdrop or a swipe.
        if (value !== undefined) this.goal.set(value);
      });
  }
}

API References#

wds-drawer#

A panel that slides in from an edge of the screen. Closed with Escape, a click on the backdrop, or by dragging the handle or the header. Top and bottom drawers support snap points (snapPoints).

Attributes

Attribute	Type	Default	Description
placement	WdsDrawerPlacement	'bottom'	Edge of the screen.
handle	boolean	false	Shows the drag handle.
modal	boolean	true	`false`: no backdrop and no page lock (the page stays usable). Set it as a property.
open	boolean	false	Controls visibility. Also set by `show()` and `close()`.
heading	string	''	Title (or the `heading` slot).
description	string	''	Description under the title (or the `description` slot), linked as `aria-describedby`.
hide-close.hideClose	boolean	false	Hides the close button in the header.
static-backdrop.staticBackdrop	boolean	false	A click on the backdrop does not close it.
dismissible	boolean	true	`false` blocks closing with Escape, the backdrop (and dragging in a drawer).
close-label.closeLabel	string	'Zamknij'	Label of the close button.

Properties

Property	Description
snapPointsWdsDrawerSnapPoint[]	Snap points (`top`/`bottom` only), e.g. `[0.4, 1]` or `['200px', 0.8]`.
snapPointWdsDrawerSnapPoint \| undefined	The active snap point (default the first of `snapPoints`).

Events

Event	Description
wds-snap-changeCustomEvent<WdsDrawerSnapChangeDetail>	The snap point changes by dragging.
wds-closeCustomEvent<void>	Closing (button, Escape, backdrop, `close()`), before the exit animation.
wds-after-closeCustomEvent<void>	After the exit animation.

Methods

Method	Description
show()	Opens it.
close()	Closes it.

Slots

Slot	Description
(default)	Content. An element with `autofocus` gets focus when it opens (otherwise the first focusable element).
heading	Custom heading (instead of the `heading` attribute).
description	Custom description (instead of the `description` attribute).
footer	Actions (stacked in a column).

CSS parts (::part)

Part	Description
dialog	The native `<dialog>` (the panel).
panel	The content container.
handle	The drag handle.
header	The header.
title	The title.
description	The description.
close	The close button.
body	The content.
footer	The footer.

CSS custom properties

Property	Description
--wds-drawer-size	Width (left/right, default min(75vw, 24rem)) or height (top/bottom).
--wds-drawer-backdrop	Color of the backdrop.

Accessibility#

The drawer is a native <dialog> named by heading and described by description (aria-labelledby, aria-describedby). Always give it a heading; hide it visually if the design has no title.

A modal drawer (default) makes the rest of the page inert and keeps focus inside; when it closes, focus returns to the element that opened it.

The close button is named by close-label (default Zamknij, in Polish). The drag handle is decorative and hidden from screen readers.

Dragging needs a pointer. With hide-close, keep another way to close the drawer, such as a button in the footer; Escape also works in a modal drawer.

Keyboard support#

Key	Function
TabShift + Tab	Moves focus between the controls of the drawer; in a modal drawer focus stays inside.
Escape	Closes the modal drawer (unless `dismissible` is `false`). A nested drawer closes first.

Usage#

Examples#

Default#

Position#

Size#

Nested#

Non-modal#

Snap points#

Responsive#

Service#

API References#

wds-drawer#

Attributes

Properties

Events

Methods

Slots

CSS parts (::part)

CSS custom properties

Accessibility#

Screen reader#

Keyboard support#