Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Table of contents

An on this page list with nested levels and an active marker on the rail, set with .toc-active or aria-current.

Navigation and overlays4 classesNo JavaScriptLight and dark

Example

Full

Classes

4 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 table of contents. On an <ul> in the example. Sets flex display, alignment, text size, border, block display and margin, and --tone and --tone-fg.
CSS
.toc :where(li li > a) {
  padding-inline-start: 1.625rem;
}

.toc :where(li li li > a) {
  padding-inline-start: 2.375rem;
}
Part Part of the table of contents. On a <p> in the example. Sets margin, text size, font weight and text color.
CSS
.toc-title {
  margin-bottom: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--foreground);
}
Part Part of the table of contents. On an <a> in the example. Sets font weight, text color and border.
CSS
.toc-active, .toc :where(a[aria-current]:not([aria-current=false])) {
  font-weight: 500;
  color: var(--tone);
  border-color: var(--tone);
}

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

<!-- Table of contents: start from the base class, then add modifiers -->
<nav aria-labelledby="toc-title" class="w-56"><p id="toc-title" class="toc-title">On this page</p><ul class="toc"><li><a href="#install" class="toc-active">Installation</a></li><li><a href="#usage">Usage</a><ul><li><a href="#cdn">From a CDN</a></li><li><a href="#npm">From npm</a></li></ul></li><li><a href="#theming">Theming</a></li><li><a href="#faq">FAQ</a></li></ul></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 overlaysDockA 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 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 overlaysScroll spyA sticky, horizontally scrolling bar of section links with an active pill, set with .scroll-spy-active or aria-current.Navigation and overlaysBack to topA round button fixed to the corner that fades in after the page scrolls, driven by a scroll timeline where supported. Use .back-to-top-static to place it inline.

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.