Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Dock

A mobile bottom navigation bar (also .bottom-nav) with icon items, labels, an active marker, a fixed position with safe area padding and a floating style.

Navigation and overlays7 classesNo JavaScriptLight and dark

Example

Full

Classes

7 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 dock. On a <nav> in the example. Sets flex display, alignment, gap, height, padding and background, and --tone and --tone-fg.
CSS
.dock, .bottom-nav {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: .25rem;
  min-height: 4rem;
  padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  color: var(--foreground);
  border-top: var(--m-border-width) solid var(--border);
  backdrop-filter: saturate(1.5) blur(14px);
}
Modifier Modifier, combined with the dock class. Not used in the example above. Sets flex display, alignment, gap, height, padding and background, and --tone and --tone-fg.
CSS
.dock, .bottom-nav {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: .25rem;
  min-height: 4rem;
  padding: .375rem .5rem calc(.375rem + env(safe-area-inset-bottom));
  background: color-mix(in oklab, var(--surface) 86%, transparent);
  color: var(--foreground);
  border-top: var(--m-border-width) solid var(--border);
  backdrop-filter: saturate(1.5) blur(14px);
}
Modifier Modifier, combined with the dock class. On an <a> in the example. Sets flex display, alignment, gap, width, padding and corner radius.
CSS
.dock-item:hover {
  color: var(--foreground);
}

.dock-item :where(svg) {
  width: 1.375rem;
  height: 1.375rem;
}
Modifier Modifier, combined with the dock class. On an <a> in the example. Sets text color, generated content, absolute position, offsets, width and height.
CSS
.dock-active, .dock-item:where([aria-current]:not([aria-current=false])) {
  color: var(--tone);
}

.dock-active::before, .dock-item:where([aria-current]:not([aria-current=false]))::before {
  content: "";
  position: absolute;
  top: calc(-.375rem - 1px);
  width: 1.75rem;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--tone);
}
Part Part of the dock. On a <span> in the example. Sets width, overflow and text style.
CSS
.dock-label {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.1;
}
Modifier Modifier, combined with the dock class. Not used in the example above. Sets fixed position, offsets, stacking order and margin.
CSS
.dock-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
}

.dock-fixed.dock-floating {
  left: .75rem;
  right: .75rem;
  bottom: calc(.75rem + env(safe-area-inset-bottom));
  margin-inline: auto;
}
Modifier Modifier, combined with the dock class. On a <nav> in the example. Sets width, padding, border, corner radius, shadow and background.
CSS
.dock-floating :where(.dock-item)::before {
  display: none;
}

.dock-floating .dock-active, .dock-floating .dock-item:where([aria-current]:not([aria-current=false])) {
  background: color-mix(in oklab, var(--tone) 12%, transparent);
}

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

<!-- Dock: start from the base class, then add modifiers -->
<nav class="dock dock-floating mx-auto" aria-label="Primary"><a href="#" class="dock-item dock-active" 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="dock-label">Home</span></a><a href="#" class="dock-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="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg><span class="dock-label">Search</span></a><a href="#" class="dock-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="M19 14c1.5-1.5 3-3.2 3-5.5A5.5 5.5 0 0 0 12 5a5.5 5.5 0 0 0-10 3.5c0 2.3 1.5 4 3 5.5l7 7z"/></svg><span class="dock-label">Saved</span></a><a href="#" class="dock-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="8" r="4"/><path d="M4 21a8 8 0 0 1 16 0"/></svg><span class="dock-label">Profile</span></a></nav>

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

  • 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 overlaysStepsNumbered progress through a process with completed, current and error states, descriptions, a vertical layout and tones.Navigation and overlaysStepperA segmented progress bar with a title and description under each segment, for multi page forms.Navigation and overlaysLinkText links with a soft underline that firms up on hover, a hover only underline, primary, muted and danger colors and an external marker.Navigation and overlaysTable of contentsAn on this page list with nested levels and an active marker on the rail, set with .toc-active or aria-current.

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.