Side Drawer — wd-drawer

Category: Overlay · Tag: wd-drawerBack to: Components overview

---

What it does

A side drawer: a full-height panel that slides in from the left or right edge of the screen over a backdrop (the shader). It is invisible when the page loads — nothing shows until your own code opens it by calling toggleDrawer(). Use it for navigation menus, filter panels, carts, and detail side-panels.

---

Adding it & its settings

Add Component → Overlay → Side Drawer.

Basic Settings (all components): #id, Classes, Inline Style. Give the drawer an #id — you'll need it to open it from a button (see Triggering it).

Component Settings:

Setting	What it does
Side	Which screen edge the drawer slides in from: Left (default — the classic nav drawer) or Right (carts, filters).
Disable closing	When checked, clicking the backdrop or pressing Esc does nothing — the drawer can only be closed from your own code (e.g. a button inside it that calls toggleDrawer()).

---

Content & slots

Same slot model as the Dialog:

• drawer-header (named) — pinned at the top, with a bottom border. Only appears if you slot something into it.
• default slot — everything without a slot attribute becomes the drawer body. The drawer is full-height, so the body takes the space between header and footer and scrolls when the content is taller.
• drawer-footer (named) — pinned at the bottom, laid out as a right-aligned row (for buttons). Only appears if you slot something into it.

<wd-drawer id="site-menu">
  <h3 slot="drawer-header">Menu</h3>

  <nav>
    <p><a href="/">Home</a></p>
    <p><a href="/pricing">Pricing</a></p>
    <p><a href="/contact">Contact</a></p>
  </nav>

  <div slot="drawer-footer">
    <button onclick="document.querySelector('#site-menu').toggleDrawer()">Close</button>
  </div>
</wd-drawer>

---

Triggering it

The drawer does nothing on its own — open (and close) it by calling its toggleDrawer() method, typically from a button's onclick event (the classic hamburger button):

document.querySelector('#site-menu').toggleDrawer()

• Each call toggles: closed → open, open → closed.
• While open, the page behind can't scroll (the drawer restores the page's scroll when it closes).
• The visitor can close it by clicking the backdrop or pressing Esc — unless Disable closing is checked. toggleDrawer() from your own code always works, regardless of that setting.
• It emits a drawerToggled event (detail.state: 1 opened, 0 closed) if you need to react to it.

---

Styling

CSS variables

Shader (the backdrop)

Variable	Default
--wd-drawer-shader-background	rgba(0, 0, 0, 0.5)
--wd-drawer-shader-blur	0px (backdrop blur radius)
--wd-drawer-shader-z-index	999

Drawer panel

Variable	Default
--wd-drawer-background	#fff
--wd-drawer-width	320px
--wd-drawer-max-width	100vw
--wd-drawer-border-radius	0 (flush — set it to round the inner corners)
--wd-drawer-box-shadow	0 0 24px rgba(0,0,0,0.2)
--wd-drawer-z-index	999
--wd-drawer-gap	1rem (space between header/body/footer)
--wd-drawer-padding	0

Header

Variable	Default
--wd-drawer-header-padding	1rem
--wd-drawer-header-border-bottom	1px solid #eee
--wd-drawer-header-font-size	1.25rem
--wd-drawer-header-font-weight	bold
--wd-drawer-header-color	#333

Body

Variable	Default
--wd-drawer-body-padding	1rem
--wd-drawer-body-font-size	1rem
--wd-drawer-body-color	#555

Footer

Variable	Default
--wd-drawer-footer-padding	1rem
--wd-drawer-footer-border-top	1px solid #eee
--wd-drawer-footer-gap	0.5rem

/* example: a wider, frosted right-hand cart drawer */
wd-drawer {
  --wd-drawer-width: 420px;
  --wd-drawer-shader-blur: 4px;
  --wd-drawer-border-radius: 1rem 0 0 1rem;
}

::part()

Part	Element
drawer-<id>	The drawer wrapper (shader + panel).

---

Notes

• Invisible by default is the point — call toggleDrawer() when you want it open (a hamburger button, a "cart" button, …).
• One #id per drawer. A page can hold several drawers (e.g. a left menu and a right cart); target each by its own id.
• Disable closing never blocks your own code — it only disables the backdrop click and Esc for the visitor.
• For RTL sites, the side is literal: pick Right if the menu should sit on the right.