Components

Drawer

Slides in from the sides, top or bottom of the screen.

Usage

Change the opening side with the .inline-start, .inline-end, .block-start, and .block-end classes.

The backdrop is blurred by default. Use the .backdrop-transparent class to remove the blur effect.

Add the .scroll-lock utility class to the drawer to lock page scrolling while it's open. Omit the class to allow background scrolling.

.backdrop-transparent

HTML

<div class="drawer-examples">
  <button class="button top" commandfor="drawer-block-start-html" command="show-modal">Block Start</button>
  <button class="button left" commandfor="drawer-inline-start-html" command="show-modal">Inline Start</button>
  <button class="button right" commandfor="drawer-inline-end-html" command="show-modal">Inline End</button>
  <button class="button bottom" commandfor="drawer-block-end-html" command="show-modal">Block End</button>
</div>

<dialog class="drawer scroll-lock inline-start" id="drawer-inline-start-html" closedby="any">
  <div class="header">
    <span>Inline Start</span>
    <button class="icon-button" title="Close" onclick="this.closest('dialog').close()">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z" />
      </svg>
    </button>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
  </div>
  <div class="footer">
    <button class="button small" commandfor="drawer-inline-start-html" command="close">Close</button>
  </div>
</dialog>

<dialog class="drawer scroll-lock inline-end" id="drawer-inline-end-html" closedby="any">
  <div class="header">
    <span>Inline End</span>
    <button class="icon-button" title="Close" onclick="this.closest('dialog').close()">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z" />
      </svg>
    </button>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo
      inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
    </p>
  </div>
  <div class="footer">
    <button class="button small" commandfor="drawer-inline-end-html" command="close">Close</button>
  </div>
</dialog>

<dialog class="drawer scroll-lock block-start" id="drawer-block-start-html" closedby="any">
  <div class="header">
    <span>Block Start</span>
    <button class="icon-button" title="Close" onclick="this.closest('dialog').close()">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z" />
      </svg>
    </button>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="footer">
    <button class="button small" commandfor="drawer-block-start-html" command="close">Close</button>
  </div>
</dialog>

<dialog class="drawer scroll-lock block-end" id="drawer-block-end-html" closedby="any">
  <div class="header">
    <span>Block End</span>
    <button class="icon-button" title="Close" onclick="this.closest('dialog').close()">
      <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M26.29 4.293a1 1 0 1 1 1.414 1.414L17.413 16l10.291 10.29a1 1 0 1 1-1.414 1.414L16 17.413L5.707 27.704a1 1 0 0 1-1.414-1.414L14.585 16L4.293 5.707a1 1 0 0 1 1.414-1.414L16 14.584z" />
      </svg>
    </button>
  </div>
  <div class="content">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat.
    </p>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
      dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
      proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
  <div class="footer">
    <button class="button small" commandfor="drawer-block-end-html" command="close">Close</button>
  </div>
</dialog>

<style>
  .drawer-examples {
    display: grid;
    grid-template-areas:
      ". top ."
      "left . right"
      ". bottom .";
    gap: var(--size-3);
    justify-items: center;
    align-items: center;
    margin: var(--size-8) auto;
    width: fit-content;
  }

  .top {
    grid-area: top;
  }

  .left {
    grid-area: left;
  }

  .right {
    grid-area: right;
  }

  .bottom {
    grid-area: bottom;
  }
</style>

How to close a drawer

You can use it like this: <dialog closedby=""> and give it the following values:

Attr value	Description
`closedby="any"`	Click anywhere outside of the drawer to close it.
`closedby="closerequest"`	Device-specific way to close, ex: `Esc` on desktop, back button on mobile, and whatever dismiss action assistive tools use.
`closedby="none"`	You have to handroll a closing solution yourself.

Accessibility

The autofocus attribute should be added to the element the user is expected to interact with immediately upon opening a modal dialog. If no other element involves more immediate interaction, it is recommended to add autofocus to the close button inside the dialog, or the dialog itself if the user is expected to click/activate it to dismiss.
Do not add the tabindex property to the <dialog> element as it is not interactive and does not receive focus. The dialog's contents, including the close button contained in the dialog, can receive focus and be interactive.

Source: MDN

Role & attributes

Role/attribute	Usage
`role="dialog"`	Identifies the element that serves as the drawer container.
`aria-labelledby="IDREF"`	Gives the drawer an accessible name by referring to the element that provides the drawer title.
`aria-describedby="IDREF"`	Gives the drawer an accessible description by referring to the drawer content that describes the primary message or purpose of the drawer.
`aria-modal="true"`	Tells assistive technologies that the windows underneath the current drawer are not available for interaction (inert).

Keyboard support

Key	Function
`Tab`	Moves focus to next focusable element inside the drawer. When focus is on the last focusable element in the drawer, moves focus to the first focusable element in the drawer.
`Shift + Tab`	Moves focus to previous focusable element inside the drawer. When focus is on the first focusable element in the drawer, moves focus to the last focusable element in the drawer.
`Esc`	Closes the drawer.

API

Classes

Type	Modifiers	Default	Description
Sides	`.inline-start`, `.inline-end`, `.block-start`, `.block-end`	`.inline-start`	The side it opens from.
Close behavior	`closedby="any"`, `closedby="closerequest"`, `closedby="none"`	`closedby="any"`	How the drawer is closed.
Backdrop	`.backdrop-transparent`	-	Removes the backdrop blur.
Autofocus	`autofocus`	-	Focuses the drawer container (or a specific element) when opened. Prevents focus from jumping to the first focusable element.

Children

Class	-	-	Description
`.header`	-	-	Top area for titles.
`.content`	-	-	Main content area.
`.actions`	-	-	Bottom action area.

Browser support

See also the full browser support guide.

Installation

drawer.css

@layer components.root {
  :where(dialog.drawer) {
    --_backdrop-bg-color: transparent;
    --_backdrop-blur: blur(2px);
    --_bg-color: var(--surface-default);
    --_block-size: min(80vb, 650px);
    --_border-color: var(--border-color);
    --_border-width: var(--border-width);
    --_color: var(--text-primary);
    --_content-padding: var(--size-4);
    --_footer-gap: var(--size-3);
    --_footer-padding: var(--size-3);
    --_header-font-size: var(--font-size-3);
    --_header-padding: var(--size-3);
    --_inline-size: min(375px, 100vi);
    --_shadow: var(--shadow-2);
    --_transition-duration: 0.2s;
    --_transition-timing: var(--ease-out-3);

    background-color: var(--_bg-color);
    border: none;
    box-shadow: var(--_shadow);
    color: var(--_color);
    display: flex;
    flex-direction: column;
    margin: 0;
    max-inline-size: 100%;
    padding: 0;
    position: fixed;
    transition:
      display var(--_transition-duration) allow-discrete,
      overlay var(--_transition-duration) allow-discrete,
      translate var(--_transition-duration) var(--_transition-timing);
    z-index: 1000;

    &::backdrop {
      backdrop-filter: var(--_backdrop-blur);
      background-color: var(--_backdrop-bg-color);
      opacity: 0;
      transition:
        display var(--_transition-duration) allow-discrete,
        overlay var(--_transition-duration) allow-discrete,
        opacity var(--_transition-duration) var(--_transition-timing);
    }

    &.backdrop-transparent {
      --_backdrop-blur: none;
    }

    .header {
      align-items: center;
      border-block-end: var(--_border-width) solid var(--_border-color);
      display: flex;
      padding: var(--_header-padding);

      :where(h1, h2, h3, h4, h5, h6) {
        font-size: var(--_header-font-size);
        margin: 0;
      }

      :where(.icon-button) {
        margin-inline-start: auto;
      }
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: var(--_content-padding);
    }

    .footer {
      border-block-start: var(--_border-width) solid var(--_border-color);
      display: flex;
      gap: var(--_footer-gap);
      justify-content: end;
      padding: var(--_footer-padding);
    }

    &.inline-start,
    &.inline-end {
      block-size: 100dvb;
      inline-size: var(--_inline-size);
      inset-block: 0;
      max-block-size: 100%;
    }

    &.inline-start {
      border-inline-end: var(--_border-width) solid var(--_border-color);
      inset-inline-end: auto;
      inset-inline-start: 0;
      translate: -100% 0;
    }

    &.inline-end {
      border-inline-start: var(--_border-width) solid var(--_border-color);
      inset-inline-end: 0;
      inset-inline-start: auto;
      translate: 100% 0;

      .footer {
        justify-content: start;
      }
    }

    &.block-start,
    &.block-end {
      block-size: var(--_block-size);
      inline-size: 100dvi;
      inset-inline: 0;
      max-block-size: 80dvb;
    }

    &.block-start {
      border-block-end: var(--_border-width) solid var(--_border-color);
      inset-block-end: auto;
      inset-block-start: 0;
      translate: 0 -100%;
    }

    &.block-end {
      border-block-start: var(--_border-width) solid var(--_border-color);
      inset-block-end: 0;
      inset-block-start: auto;
      translate: 0 100%;
    }

    &[open] {
      translate: 0 0;

      &::backdrop {
        opacity: 1;
      }

      @starting-style {
        &::backdrop {
          opacity: 0;
        }

        &.inline-start {
          translate: -100% 0;
        }

        &.inline-end {
          translate: 100% 0;
        }

        &.block-start {
          translate: 0 -100%;
        }

        &.block-end {
          translate: 0 100%;
        }
      }
    }
  }

  /* Scroll-lock is provided by the shared `.scroll-lock` utility in core/utils.css.
     This carve-out re-enables page scrolling when a transparent-backdrop drawer is
     open on wide viewports (where the drawer doesn't visually cover the page). */
  html:has(dialog.drawer.scroll-lock[open].backdrop-transparent) {
    overflow: unset;
    overscroll-behavior: auto;

    @media (width < 500px) {
      overflow: clip;
      overscroll-behavior: contain;
    }
  }
}