Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Pagination

Page links with previous and next, an ellipsis, the current page, disabled items, three sizes and pill or joined styles.

Navigation and overlays14 classesNo JavaScriptLight and dark

Example

Full

Classes

14 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 pagination. On an <ul> in the example. Sets flex display, alignment, gap and text size, and 5 custom properties.
CSS
.pagination {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --pg-size: var(--m-control-h-md);
  --pg-fs: var(--m-control-fs-md);
  --pg-radius: var(--m-radius-md);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem;
  font-size: var(--pg-fs);
}
Modifier Modifier, combined with the pagination class. On an <a> in the example. Sets inline-flex display, alignment, gap, width, height and padding.
CSS
.pagination-item:hover {
  background: color-mix(in oklab, var(--foreground) 6%, transparent);
}

.pagination-active:hover, .pagination-item:where([aria-current]:not([aria-current=false])):hover {
  background: var(--tone);
}
Modifier Modifier, combined with the pagination class. Not used in the example above. Sets text color and background.
CSS
.pagination-active:hover, .pagination-item:where([aria-current]:not([aria-current=false])):hover {
  background: var(--tone);
}

.pagination-active, .pagination-item:where([aria-current]:not([aria-current=false])) {
  color: var(--tone-fg);
  background: var(--tone);
}
Modifier Modifier, combined with the pagination class. On an <a> in the example. Sets opacity.
CSS
.pagination-disabled, .pagination-item:where(:disabled, [aria-disabled=true]) {
  opacity: var(--m-disabled-opacity);
  pointer-events: none;
}
Part Part of the pagination. On a <span> in the example. Sets inline-flex display, alignment, gap, width, height and padding.
CSS
.pagination-ellipsis:empty::before {
  content: "\2026";
}

.pagination-ellipsis {
  padding: 0;
  color: var(--muted-foreground);
  pointer-events: none;
}
Modifier Modifier, combined with the pagination class. On an <a> in the example. Sets generated content, width, height, background and padding.
CSS
.pagination-prev {
  padding-inline-start: .5rem;
}

.pagination-prev::before, .pagination-next::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  mask: var(--m-nav-left) center / contain no-repeat;
}
Modifier Modifier, combined with the pagination class. On an <a> in the example. Sets generated content, width, height, background and padding.
CSS
.pagination-next {
  padding-inline-end: .5rem;
}

.pagination-next::after {
  mask-image: var(--m-nav-right);
}
Size Extra small size. Not used in the example above. Sets --pg-size, --pg-fs and --pg-radius.
CSS
.pagination-xs {
  --pg-size: var(--m-control-h-xs);
  --pg-fs: var(--m-control-fs-xs);
  --pg-radius: var(--m-radius-sm);
}
Size Small size. Not used in the example above. Sets --pg-size, --pg-fs and --pg-radius.
CSS
.pagination-sm {
  --pg-size: var(--m-control-h-sm);
  --pg-fs: var(--m-control-fs-sm);
  --pg-radius: var(--m-radius-sm);
}
Size Medium, the default size. Not used in the example above. Sets --pg-size, --pg-fs and --pg-radius.
CSS
.pagination-md {
  --pg-size: var(--m-control-h-md);
  --pg-fs: var(--m-control-fs-md);
  --pg-radius: var(--m-radius-md);
}
Size Large size. Not used in the example above. Sets --pg-size, --pg-fs and --pg-radius.
CSS
.pagination-lg {
  --pg-size: var(--m-control-h-lg);
  --pg-fs: var(--m-control-fs-lg);
  --pg-radius: var(--m-radius-lg);
}
Size Extra large size. Not used in the example above. Sets --pg-size, --pg-fs and --pg-radius.
CSS
.pagination-xl {
  --pg-size: var(--m-control-h-xl);
  --pg-fs: var(--m-control-fs-xl);
  --pg-radius: var(--m-radius-xl);
}
Modifier Modifier, combined with the pagination class. Not used in the example above. Sets --pg-radius.
CSS
.pagination-pills {
  --pg-radius: var(--m-radius-full);
}
Modifier Modifier, combined with the pagination class. Not used in the example above. Sets gap, margin, border, corner radius and background.
CSS
.pagination-joined {
  gap: 0;
}

.pagination-joined > :where(:last-child) {
  border-start-end-radius: var(--pg-radius);
  border-end-end-radius: var(--pg-radius);
}

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

<!-- Pagination: start from the base class, then add modifiers -->
<nav aria-label="Pagination"><ul class="pagination"><li><a href="#" class="pagination-item pagination-prev pagination-disabled" aria-disabled="true">Previous</a></li><li><a href="#" class="pagination-item" aria-current="page">1</a></li><li><a href="#" class="pagination-item">2</a></li><li><a href="#" class="pagination-item">3</a></li><li><span class="pagination-ellipsis" aria-hidden="true"></span></li><li><a href="#" class="pagination-item">12</a></li><li><a href="#" class="pagination-item pagination-next">Next</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 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.Navigation and overlaysBreadcrumbsThe path to the current page with chevron or slash separators and an optional pill container.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.

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.