Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Drawer dialog

A modal side panel built on <dialog>, opened with command="show-modal" and closed with command="close" or a click outside (closedby="any"). Slides in from any edge.

Navigation and overlays5 classesNo JavaScriptLight and dark

Example

Full

Classes

5 classes. Click a name to copy it. Utilities on the same element always win over component defaults, so any of them can be adjusted with plain utility classes.

ClassTypeWhat it does
Base Base class of the drawer dialog. On a <dialog> in the example. Sets overflow, flex display, alignment, gap, width and height, and 8 custom properties.
CSS
.drawer-dialog[open] {
  transform: none;
}

.drawer-dialog:not([open]) {
  display: none;
}
Part Part of the drawer dialog. Not used in the example above. Sets 4 custom properties.
CSS
.drawer-start {
  --drawer-from: translateX(-100%);
  --drawer-justify: start;
  --drawer-inset: 0 auto 0 0;
  --drawer-radius: 0 var(--m-radius-2xl) var(--m-radius-2xl) 0;
}
Modifier Modifier, combined with the drawer-dialog class. On a <dialog> in the example. Sets 4 custom properties.
CSS
.drawer-end {
  --drawer-from: translateX(100%);
  --drawer-justify: end;
  --drawer-inset: 0 0 0 auto;
  --drawer-radius: var(--m-radius-2xl) 0 0 var(--m-radius-2xl);
}

@media (min-width: 1024px) {
  .drawer-open-lg.drawer-end > .drawer-side {
    grid-column: 2;
  }
}
Part Part of the drawer dialog. Not used in the example above. Sets 7 custom properties.
CSS
.drawer-top {
  --drawer-from: translateY(-100%);
  --drawer-justify: stretch;
  --drawer-align: start;
  --drawer-inset: 0 0 auto 0;
  --drawer-w: 100%;
  --drawer-h: auto;
  --drawer-radius: 0 0 var(--m-radius-2xl) var(--m-radius-2xl);
}
Part Part of the drawer dialog. Not used in the example above. Sets 7 custom properties.
CSS
.drawer-bottom {
  --drawer-from: translateY(100%);
  --drawer-justify: stretch;
  --drawer-align: end;
  --drawer-inset: auto 0 0 0;
  --drawer-w: 100%;
  --drawer-h: auto;
  --drawer-radius: var(--m-radius-2xl) var(--m-radius-2xl) 0 0;
}

Usage

Components ship inside the same stylesheet as the utilities. There is nothing else to install and no script to load: link Monsoon and write the markup.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">

<!-- Drawer dialog: start from the base class, then add modifiers -->
<button type="button" commandfor="cart-drawer" command="show-modal" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90">Open cart</button><dialog id="cart-drawer" class="drawer-dialog drawer-end" closedby="any" aria-labelledby="cart-title"><h2 id="cart-title" class="text-lg font-semibold">Your cart</h2><button type="button" commandfor="cart-drawer" command="close" class="modal-close" aria-label="Close"></button><ul class="flex flex-col gap-3 text-sm"><li class="flex justify-between"><span>Linen shirt</span><span class="font-medium">$48</span></li><li class="flex justify-between"><span>Canvas tote</span><span class="font-medium">$22</span></li></ul><button type="button" class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground hover:opacity-90 mt-auto w-full">Checkout</button></dialog>

Theme it with --seed on any ancestor, for example style="--seed: #0d9488", and force a scheme with class="dark" or class="light" on a wrapper.

Accessibility

  • Built on the native dialog element. Opened with showModal() (or a command button) it goes to the top layer, makes the rest of the page inert, closes with Escape and returns focus to the button that opened it.
  • Use button for actions and a for navigation. Icon only buttons need an aria-label; decorative icons carry aria-hidden="true".
  • Every interactive part shows a visible focus ring with :focus-visible, and tone colors pair with -foreground tokens that keep text at 4.5:1 or better in light and dark mode.
Navigation and overlaysDrawerA side panel toggled by a hidden checkbox and its labels, with a dimmed overlay that closes it. Works without JavaScript and without a dialog.Navigation and overlaysResponsive drawerAn app shell whose drawer is a toggled overlay on small screens and a sticky, always open sidebar from the lg breakpoint.Navigation and overlaysModalA centered dialog over a blurred backdrop. Open it with command="show-modal" (or link to its id for a :target fallback), close it with command="close", a form with method="dialog" or Escape. Five widths, a top aligned variant and a bottom sheet on phones.Navigation and overlaysSheetA bottom sheet dialog with a grab handle that slides up from the bottom edge, for share menus and quick actions on touch screens.

No recent searches

Try , , or .

Recent

Loading the search index

No results for ""

Check the spelling, or search a class name such as px-4.