Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Menu

A 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 overlays11 classesNo JavaScriptLight and dark

Example

Full

Classes

11 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 menu. On an <ul> in the example. Sets pointer cursor, hidden by default, flex display, alignment, gap and text size, and 5 custom properties.
CSS
.menu :where(details[open] > summary)::after {
  transform: rotate(180deg);
}

.menu :where(svg) {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: .8;
}
Modifier Modifier, combined with the menu class. Not used in the example above. Sets flex display, alignment, gap, width, padding and corner radius.
CSS
.menu :where(li > a, li > button, li > label, details > summary):hover, .menu-item:hover {
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.menu :where(li > a, li > button, li > label, details > summary), .menu-item {
  display: flex;
  align-items: center;
  gap: var(--menu-gap);
  width: 100%;
  padding: var(--menu-pad);
  border-radius: var(--m-radius-md);
  color: inherit;
  line-height: 1.25rem;
  text-align: start;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  outline-offset: calc(-1 * var(--m-ring-width));
  transition: background-color var(--m-duration-fast), color var(--m-duration-fast);
}
Part Part of the menu. On a <li> in the example. Sets padding, text size, font weight, text style and text color.
CSS
.menu-title {
  padding: .625rem .75rem .25rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--muted-foreground);
}
Part Part of the menu. On an <a> in the example. Sets text color, font weight and background.
CSS
.menu-active:hover, .menu :where([aria-current]:not([aria-current=false])):hover {
  background: color-mix(in oklab, var(--tone) 16%, transparent);
}

.menu-active, .menu :where([aria-current]:not([aria-current=false])) {
  color: var(--tone);
  font-weight: 500;
  background: color-mix(in oklab, var(--tone) 12%, transparent);
}
Part Part of the menu. On an <a> in the example. Sets opacity.
CSS
.menu-disabled, .menu :where(li > button:disabled, [aria-disabled=true]) {
  opacity: var(--m-disabled-opacity);
  pointer-events: none;
}
Part Part of the menu. On a <button> in the example. Sets text color and background.
CSS
.menu-danger {
  color: var(--danger);
}

.menu-danger:hover {
  background: color-mix(in oklab, var(--danger) 10%, transparent);
}
Part Part of the menu. On a <li> in the example. Sets height, margin and background.
CSS
.menu-divider {
  height: 1px;
  margin: .25rem .5rem;
  background: var(--border);
}
Part Part of the menu. On a <span> in the example. Sets margin, padding, text size, text style and text color.
CSS
.menu-shortcut {
  margin-inline-start: auto;
  padding-inline-start: 1rem;
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--muted-foreground);
}
Modifier Modifier, combined with the menu class. Not used in the example above. Sets alignment, gap, absolute position, offsets, stacking order and width.
CSS
.menu-horizontal {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
}

.menu-horizontal :where(li ul) {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 30;
  min-width: 12rem;
  margin: .5rem 0 0;
  padding: .25rem;
  border: var(--m-border-width) solid var(--border);
  border-radius: var(--m-radius-xl);
  background: var(--surface);
  box-shadow: var(--m-shadow-lg);
}
Size Small size. Not used in the example above. Sets --menu-pad, --menu-fs and --menu-gap.
CSS
.menu-sm {
  --menu-pad: .3125rem .625rem;
  --menu-fs: .8125rem;
  --menu-gap: .5rem;
}
Size Large size. Not used in the example above. Sets --menu-pad, --menu-fs and --menu-gap.
CSS
.menu-lg {
  --menu-pad: .625rem 1rem;
  --menu-fs: 1rem;
  --menu-gap: .75rem;
}

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

<!-- Menu: start from the base class, then add modifiers -->
<ul class="menu w-64 rounded-xl border border-border bg-surface p-2"><li class="menu-title">Workspace</li><li><a href="#" class="menu-active"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>Inbox<span class="menu-shortcut">12</span></a></li><li><a href="#"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 3v18h18"/><path d="m7 15 4-4 3 3 5-6"/></svg>Analytics</a></li><li><details open><summary><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>Projects</summary><ul><li><a href="#">Website</a></li><li><a href="#">Mobile app</a></li><li><a href="#" class="menu-disabled">Archived</a></li></ul></details></li><li class="menu-divider"></li><li><button type="button" class="menu-danger"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/></svg>Sign out</button></li></ul>

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.
  • 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 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.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.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 overlaysPopoverA floating card on the native popover attribute: light dismiss, Escape and focus return for free. Anchored to its button where anchor positioning is supported, centered otherwise.

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.