Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Mega menu

A wide navbar panel on <details name> so only one is open at a time, with sections, icon items with descriptions and a featured card.

Navigation and overlays9 classesNo JavaScriptLight and dark

Example

Full

Classes

9 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 mega menu. On a <details> in the example. Sets pointer cursor, hidden by default, inline-flex display, alignment, gap and height.
CSS
.mega-menu[open] > :where(summary)::after {
  transform: rotate(180deg);
}

@starting-style {
  .mega-menu[open] > .mega-menu-panel {
    opacity: 0;
    transform: translateY(-.375rem);
  }
}
Part Part of the mega menu. On a <div> in the example. Sets absolute position, offsets, stacking order, grid display, grid tracks and gap.
CSS
@media (prefers-reduced-motion: reduce) {
  .drawer-side,
  .drawer-side > *,
  .drawer-dialog,
  .drawer-dialog::backdrop,
  .modal,
  .modal-box,
  .modal > .command-palette,
  .sheet,
  .sheet::backdrop,
  .popover,
  .dropdown-content,
  .lightbox,
  .lightbox-image,
  .navbar-mobile-panel,
  .mega-menu-panel,
  .sidebar,
  .back-to-top,
  .skip-link {
    transition-duration: 0s;
  }
}

.mega-menu-panel {
  position: absolute;
  top: 100%;
  left: .75rem;
  right: .75rem;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem 1.5rem;
  max-width: 64rem;
  margin: .5rem auto 0;
  padding: 1.25rem;
  background: var(--surface);
  color: var(--foreground);
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-2xl);
  box-shadow: var(--m-shadow-lg);
  transition: opacity var(--m-duration), transform var(--m-duration);
}
Part Part of the mega menu. On a <div> in the example. Sets flex display, alignment and gap.
CSS
.mega-menu-section {
  display: flex;
  flex-direction: column;
  gap: .125rem;
}
Part Part of the mega menu. On a <p> in the example. Sets padding, text size, font weight and text color.
CSS
.mega-menu-heading {
  padding: .25rem .75rem .5rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
}
Part Part of the mega menu. On an <a> in the example. Sets flex display, alignment, gap, padding, corner radius and border.
CSS
.mega-menu-item:hover {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
}

.mega-menu-item {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: .625rem .75rem;
  border-radius: var(--m-radius-lg);
  outline-offset: calc(-1 * var(--m-ring-width));
  transition: background-color var(--m-duration-fast);
}
Part Part of the mega menu. On a <span> in the example. Sets grid display, alignment, width, height, corner radius and text color.
CSS
.mega-menu-icon :where(svg) {
  width: 1.125rem;
  height: 1.125rem;
}

.mega-menu-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--m-radius-md);
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 12%, transparent);
}
Part Part of the mega menu. On a <span> in the example. Sets block display, text size, font weight, text style and text color.
CSS
.mega-menu-title {
  display: block;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--foreground);
}
Part Part of the mega menu. On a <span> in the example. Sets block display, margin, text size, text style and text color.
CSS
.mega-menu-description {
  display: block;
  margin-top: .125rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--muted-foreground);
}

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">

<!-- Mega menu: start from the base class, then add modifiers -->
<header class="navbar"><div class="navbar-start"><a href="#" class="navbar-brand"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 15a8 8 0 0 1 16 0"/><path d="M12 15v5a2 2 0 0 1-4 0"/><path d="M12 7V4"/></svg>Acme</a></div><nav class="navbar-center" aria-label="Main"><details class="mega-menu" name="mega" open><summary>Product</summary><div class="mega-menu-panel"><div class="mega-menu-section"><p class="mega-menu-heading">Platform</p><a href="#" class="mega-menu-item"><span class="mega-menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M13 2 4 14h7l-1 8 9-12h-7z"/></svg></span><span><span class="mega-menu-title">Edge functions</span><span class="mega-menu-description">Run code close to every user.</span></span></a><a href="#" class="mega-menu-item"><span class="mega-menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span><span><span class="mega-menu-title">Storage</span><span class="mega-menu-description">Files and blobs with global caching.</span></span></a></div><div class="mega-menu-section"><p class="mega-menu-heading">Security</p><a href="#" class="mega-menu-item"><span class="mega-menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span><span><span class="mega-menu-title">Firewall</span><span class="mega-menu-description">Block bad traffic before it lands.</span></span></a><a href="#" class="mega-menu-item"><span class="mega-menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"/><path d="M4 19.5V21h16"/></svg></span><span><span class="mega-menu-title">Audit logs</span><span class="mega-menu-description">Every change, searchable for a year.</span></span></a></div><a href="#" class="mega-menu-featured"><span class="mega-menu-title">New: Monsoon 2</span>Faster builds, smaller bundles and a fresh dashboard.</a></div></details><details class="mega-menu" name="mega"><summary>Resources</summary><div class="mega-menu-panel"><div class="mega-menu-section"><a href="#" class="mega-menu-item"><span class="mega-menu-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20V3H6.5A2.5 2.5 0 0 0 4 5.5z"/><path d="M4 19.5V21h16"/></svg></span><span><span class="mega-menu-title">Guides</span><span class="mega-menu-description">Step by step tutorials.</span></span></a></div></div></details></nav><div class="navbar-end"><a href="#" class="navbar-link">Sign in</a></div></header>

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 details and summary, so it opens with Enter or Space and screen readers announce expanded and collapsed. A shared name makes a group exclusive.
  • Wrap navigation in nav with an aria-label when there is more than one on the page, and mark the current link with aria-current="page".
  • 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 overlaysMenuA list of links or actions with titles, icons, shortcuts, an active item, disabled and danger states, nested submenus on <details> and a horizontal layout.Navigation and overlaysContext menuThe compact look of a desktop context menu, with labels, separators, shortcuts and a filled highlight. Pair it with a popover to show it.InteractiveSelect (custom)A fully custom select over a native one, which stays in the form with its value and change events in sync. Options can carry an icon, an image, a color or a description, optgroups become headings, long lists get a search box, multiple shows chips, and it can be clearable. Keyboard and screen readers follow the WAI-ARIA select only combobox pattern, and the size, tone and variant classes of .select carry over. Needs monsoon.js.Navigation and overlaysLightboxA full screen dark viewer for one image with a caption, a counter, close and previous or next controls. Uses a <dialog> or :target links.

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.