Navigation and overlays

Scroll spy

A sticky, horizontally scrolling bar of section links with an active pill, set with .scroll-spy-active or aria-current.

Navigation and overlays3 classesNo JavaScriptLight and dark

Example

Full

scroll-spy.html

<nav class="scroll-spy" aria-label="Sections"><a href="#overview" class="scroll-spy-link scroll-spy-active">Overview</a><a href="#features" class="scroll-spy-link">Features</a><a href="#specs" class="scroll-spy-link">Specs</a><a href="#reviews" class="scroll-spy-link">Reviews</a><a href="#faq" class="scroll-spy-link">FAQ</a></nav>

Classes

3 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.

Class Type What it does

Class	Type	What it does
	Base	Base class of the scroll spy. On a <nav> in the example. Sets sticky position, offsets, stacking order, flex display, gap and padding. CSS `.scroll-spy { position: sticky; top: 0; z-index: 20; display: flex; gap: .25rem; padding: .5rem; overflow-x: auto; scrollbar-width: none; background: color-mix(in oklab, var(--background) 80%, transparent); border-bottom: var(--m-border-width) solid var(--border); backdrop-filter: blur(12px); }`
	Modifier	Modifier, combined with the scroll-spy class. On an <a> in the example. Sets alignment, padding, corner radius, text size, font weight and text style. CSS `.scroll-spy-link:hover { color: var(--foreground); background: color-mix(in oklab, var(--foreground) 6%, transparent); } .scroll-spy-active, .scroll-spy-link:where([aria-current]:not([aria-current=false])) { color: var(--background); background: var(--foreground); }`
	Modifier	Modifier, combined with the scroll-spy class. On an <a> in the example. Sets text color and background. CSS `.scroll-spy-active, .scroll-spy-link:where([aria-current]:not([aria-current=false])) { color: var(--background); background: var(--foreground); }`

Base

Base class of the scroll spy. On a <nav> in the example. Sets sticky position, offsets, stacking order, flex display, gap and padding.

CSS

.scroll-spy {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: .25rem;
  padding: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  background: color-mix(in oklab, var(--background) 80%, transparent);
  border-bottom: var(--m-border-width) solid var(--border);
  backdrop-filter: blur(12px);
}

Modifier

Modifier, combined with the scroll-spy class. On an <a> in the example. Sets alignment, padding, corner radius, text size, font weight and text style.

CSS

.scroll-spy-link:hover {
  color: var(--foreground);
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.scroll-spy-active, .scroll-spy-link:where([aria-current]:not([aria-current=false])) {
  color: var(--background);
  background: var(--foreground);
}

Modifier

Modifier, combined with the scroll-spy class. On an <a> in the example. Sets text color and background.

CSS

.scroll-spy-active, .scroll-spy-link:where([aria-current]:not([aria-current=false])) {
  color: var(--background);
  background: var(--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">

<!-- Scroll spy: start from the base class, then add modifiers -->
<nav class="scroll-spy" aria-label="Sections"><a href="#overview" class="scroll-spy-link scroll-spy-active">Overview</a><a href="#features" class="scroll-spy-link">Features</a><a href="#specs" class="scroll-spy-link">Specs</a><a href="#reviews" class="scroll-spy-link">Reviews</a><a href="#faq" class="scroll-spy-link">FAQ</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.

#Example

#Classes

#Usage

#Accessibility

#Related components

Example

Classes

Usage

Accessibility

Related components