Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Sidebar

An app sidebar with a header, titled sections, icon items, badges, collapsible groups on <details>, a footer and a compact icon only mode.

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 sidebar. On an <aside> in the example. Sets flex display, alignment, gap, width, height and padding, and --tone, --tone-fg and --sidebar-w.
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;
  }
}

.sidebar {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --sidebar-w: 16rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: var(--sidebar-w);
  height: 100%;
  padding: .75rem;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: .875rem;
  background: var(--surface-2);
  color: var(--foreground);
  border-inline-end: var(--m-border-width) solid var(--border);
  transition: width var(--m-duration) var(--m-ease);
}
Part Part of the sidebar. On a <div> in the example. Sets flex display, alignment, gap, height, padding and font weight.
CSS
.sidebar-header :where(svg, img) {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

.sidebar-header {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.5rem;
  padding: .25rem .5rem;
  font-weight: 600;
}
Part Part of the sidebar. On a <nav> in the example. Sets flex display, alignment and gap.
CSS
.sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-compact :where(.sidebar-section, .sidebar-footer) {
  align-items: center;
}
Part Part of the sidebar. On a <p> in the example. Sets padding, text size, font weight, text color, text style and absolute position.
CSS
.sidebar-title {
  padding: .25rem .625rem .375rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.sidebar-compact :where(.sidebar-label, .sidebar-title) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
Part Part of the sidebar. On an <a> in the example. Sets flex display, alignment, gap, width, height and padding.
CSS
.sidebar-item :where(svg) {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
}

.sidebar-item:hover {
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
}
Modifier Modifier, combined with the sidebar class. Not used in the example above. Sets text color and background.
CSS
.sidebar-active, .sidebar-item:where([aria-current]:not([aria-current=false])) {
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 12%, transparent);
}
Part Part of the sidebar. On a <span> in the example. Sets alignment, width, overflow and text style.
CSS
.sidebar-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-compact :where(.sidebar-label, .sidebar-title) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
Part Part of the sidebar. On a <span> in the example. Sets inline-grid display, alignment, width, height, margin and padding.
CSS
.sidebar-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.375rem;
  height: 1.25rem;
  margin-inline-start: auto;
  padding: 0 .375rem;
  border-radius: var(--m-radius-full);
  font-size: .6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 8%, transparent);
}

.sidebar-compact :where(.sidebar-badge, .sidebar-group > .sidebar-item::after) {
  display: none;
}
Part Part of the sidebar. On a <details> in the example. Sets pointer cursor, hidden by default, generated content, width, height and margin.
CSS
.sidebar-group[open] > .sidebar-item::after {
  transform: rotate(90deg);
}

.sidebar-compact :where(.sidebar-badge, .sidebar-group > .sidebar-item::after) {
  display: none;
}
Modifier Modifier, combined with the sidebar class. Not used in the example above. Sets alignment, width, height, padding, absolute position and overflow, and --sidebar-w.
CSS
.sidebar-compact {
  --sidebar-w: 4rem;
  align-items: center;
}

.sidebar-compact :where(.sidebar-section, .sidebar-footer) {
  align-items: center;
}

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

<!-- Sidebar: start from the base class, then add modifiers -->
<aside class="sidebar h-96"><div class="sidebar-header"><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><span class="sidebar-label">Acme Inc</span></div><nav class="sidebar-section" aria-label="Main"><p class="sidebar-title">General</p><a href="#" class="sidebar-item" aria-current="page"><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 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z"/></svg><span class="sidebar-label">Home</span></a><a href="#" class="sidebar-item"><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><span class="sidebar-label">Inbox</span><span class="sidebar-badge">8</span></a><a href="#" class="sidebar-item"><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><span class="sidebar-label">Reports</span></a></nav><div class="sidebar-section"><p class="sidebar-title">Projects</p><details class="sidebar-group" open><summary class="sidebar-item"><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><span class="sidebar-label">Website</span></summary><div><a href="#" class="sidebar-item"><span class="sidebar-label">Pages</span></a><a href="#" class="sidebar-item"><span class="sidebar-label">Deployments</span></a></div></details></div><div class="sidebar-footer"><a href="#" class="sidebar-item"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M4.9 4.9 7 7M17 17l2.1 2.1M2 12h3M19 12h3M4.9 19.1 7 17M17 7l2.1-2.1"/></svg><span class="sidebar-label">Settings</span></a></div></aside>

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.
Data display and layoutSidebar layoutA sidebar next to the main content that stacks when space runs out, without media queries.Navigation and overlaysNavbarA 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 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 overlaysTabsTabs in line, boxed, pills and lifted styles. Built from radio inputs with panels in .tab-content, so arrow keys switch tabs without JavaScript, or from links for routed pages.

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.