Drawer

Default

Use .drawer for the panel and .is-open to show it.

<button
	class="btn btn-primary btn-solid"
	type="button"
	aria-controls="drawer"
	aria-expanded="false">
	Open drawer
</button>

<div
	id="drawer"
	class="drawer"
	role="dialog"
	aria-modal="true"
	aria-labelledby="drawer-title"
	aria-hidden="true"
	inert>
	<div class="drawer-header">
		<p id="drawer-title" class="drawer-title h6">Drawer</p>
		<button class="icon-btn" type="button" aria-label="Close drawer">...</button>
	</div>

	<div class="drawer-body">...</div>
</div>

<div class="overlay"></div>

Interactive

This modal demo traps focus and blocks the page. Non-modal drawers leave the page interactive.

Open drawer

When toggling .is-open, synchronize aria-expanded, aria-hidden and inert; move focus into the drawer and return it to the trigger on close.

<div class="drawer is-open">...</div>

CSS Variables

Override these variables on the component or an ancestor.

--drawer-width: 20rem;
--drawer-z-index: var(--z-index-drawer);
--drawer-closed-translate-x: -100%;
--drawer-bg-color: var(--bg-surface);
--drawer-border-width: var(--border-width);
--drawer-border-color: var(--border-color);
--drawer-header-padding-y: var(--spacer-2);
--drawer-header-padding-x: var(--spacer-3);
--drawer-body-padding: var(--spacer-3);
--drawer-transition-duration: var(--transition-duration);
--drawer-transition-easing: var(--transition-easing);
--overlay-highlight: rgb(from var(--gray-800) r g b / 0.7);
--overlay-z-index: var(--z-index-overlay);