`<wa-drawer>`

Drawers slide in from the edge of a container to expose additional options and information without navigating away. Useful for navigation menus, filters, and secondary content.

Category: Overlays
Built with: Lit
Library: Web Awesome
Author: Web Awesome
Package: @awesome.me/webawesome
Component size: 31.0 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size: 8.2 kB JS (shared by every Web Awesome component, loaded once per page)
Popular: 5 out of 5
Downloads: 364,100/week · jsDelivr 33,855,650 hits/month (whole @awesome.me/webawesome package)
GitHub stars: 1,348
Latest stable version: 3.14.0
Last published: Sep 24, 2026
Component last changed: Jul 30, 2026 (in 3.11.0)
License: MIT
Status: stable

Attributes

open
label
placement
without-header
light-dismiss
with-footer
with-label
dir
lang
did-ssr

Slots

label
header-actions
footer

Events

wa-show
wa-after-show
wa-hide
wa-after-hide

CSS Parts

dialog
header
header-actions
title
close-button
close-button__base
body
footer