Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Navbar

A top bar with start, center and end slots, optional sticky and blurred glass styles and a <details> based mobile menu that replaces the links below the md breakpoint.

Navigation and overlays12 classesNo JavaScriptLight and dark

Example

Full

Classes

12 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 navbar. On a <header> in the example. Sets stacking order, flex display, alignment, gap, height and padding.
CSS
.navbar {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 4rem;
  padding: .5rem 1rem;
  background: var(--background);
  color: var(--foreground);
  border-bottom: var(--m-border-width) solid var(--border);
}
Part Part of the navbar. On a <div> in the example. Sets flex display, alignment, gap and width.
CSS
.navbar-start, .navbar-end {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: .5rem;
  min-width: max-content;
}
Modifier Modifier, combined with the navbar class. On a <nav> in the example. Sets flex display, alignment and gap.
CSS
.navbar-center {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  gap: .25rem;
}
Part Part of the navbar. On a <div> in the example. Sets flex display, alignment, gap and width.
CSS
.navbar-end {
  justify-content: flex-end;
}

.navbar-start, .navbar-end {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: .5rem;
  min-width: max-content;
}
Part Part of the navbar. On an <a> in the example. Sets inline-flex display, alignment, gap, text size, font weight and text style.
CSS
.navbar-brand :where(svg, img) {
  width: 1.75rem;
  height: 1.75rem;
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
Modifier Modifier, combined with the navbar class. On a <nav> in the example. Sets flex display, alignment, gap and hidden by default.
CSS
.navbar-nav {
  display: flex;
  align-items: center;
  gap: .25rem;
}

@media (max-width: 767.98px) {
  .navbar-nav {
    display: none;
  }
}
Modifier Modifier, combined with the navbar class. On a <header> in the example. Sets sticky position and offsets.
CSS
.navbar-sticky {
  position: sticky;
  top: 0;
}
Modifier Modifier, combined with the navbar class. On a <header> in the example. Sets background.
CSS
.navbar-blur {
  background: color-mix(in oklab, var(--background) 72%, transparent);
  backdrop-filter: saturate(1.6) blur(14px);
}
Part Part of the navbar. On a <details> in the example. Sets pointer cursor, hidden by default, opacity, transform and block display.
CSS
.navbar-mobile {
  display: none;
}

@media (max-width: 767.98px) {
  .navbar-mobile {
    display: block;
  }
}
Part Part of the navbar. On a <summary> in the example. Sets grid display, alignment, width, height, corner radius and text color.
CSS
.navbar-burger:hover {
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.navbar-burger::before {
  content: "";
  width: 1.375rem;
  height: 1.375rem;
  background: currentColor;
  mask: var(--m-nav-burger) center / contain no-repeat;
}
Part Part of the navbar. On a <nav> in the example. Sets absolute position, offsets, flex display, alignment, gap and height.
CSS
.navbar-mobile-panel .navbar-link {
  height: 2.75rem;
  font-size: 1rem;
}

@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;
  }
}

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

<!-- Navbar: start from the base class, then add modifiers -->
<header class="navbar navbar-sticky navbar-blur"><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 navbar-nav" aria-label="Main"><a href="#" class="navbar-link" aria-current="page">Product</a><a href="#" class="navbar-link">Pricing</a><a href="#" class="navbar-link">Docs</a><a href="#" class="navbar-link">Blog</a></nav><div class="navbar-end"><a href="#" class="navbar-link hidden sm:inline-flex">Sign in</a><a href="#" 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">Get started</a><details class="navbar-mobile"><summary class="navbar-burger" aria-label="Menu"></summary><nav class="navbar-mobile-panel" aria-label="Mobile"><a href="#" class="navbar-link" aria-current="page">Product</a><a href="#" class="navbar-link">Pricing</a><a href="#" class="navbar-link">Docs</a><a href="#" class="navbar-link">Blog</a></nav></details></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 overlaysCommand paletteA search box with grouped results and keyboard hints, shown in a top aligned modal dialog.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.Navigation and overlaysMega menuA 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 overlaysSidebarAn app sidebar with a header, titled sections, icon items, badges, collapsible groups on <details>, a footer and a compact icon only mode.

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.