Monsoon v0.2.0
Made by Alexandre Kohler Star

Navigation and overlays

Tabs

Tabs 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 overlays15 classesNo JavaScriptLight and dark

Example

Full

Classes

15 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 tabs. On a <div> in the example. Sets flex display and alignment, and 5 custom properties.
CSS
.tabs {
  --tone: var(--primary);
  --tone-fg: var(--primary-foreground);
  --tab-h: var(--m-control-h-md);
  --tab-px: var(--m-control-px-md);
  --tab-fs: var(--m-control-fs-md);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
Modifier Modifier, combined with the tabs class. On an <input> in the example. Sets inline-flex display, alignment, gap, height, padding and text size.
CSS
.tabs-full > .tab {
  flex: 1 1 0;
}

.tabs-line > .tab {
  border-radius: 0;
}
Modifier Modifier, combined with the tabs class. On an <a> in the example. Sets text color, shadow, background and border.
CSS
.tab:is(:checked, .tab-active, [aria-selected=true], [aria-current=page]), .tab:has(> input:checked) {
  color: var(--foreground);
}

.tabs-line > .tab:is(:checked, .tab-active, [aria-selected=true], [aria-current=page]), .tabs-line > .tab:has(> input:checked) {
  box-shadow: inset 0 -2px 0 var(--tone);
}
Part Part of the tabs. On a <div> in the example. Sets hidden by default, width and padding.
CSS
.tab-content {
  order: 1;
  display: none;
  width: 100%;
  padding: 1rem 0;
}

.tabs-boxed > .tab-content {
  margin-inline: -.25rem;
}
Modifier Modifier, combined with the tabs class. On an <a> in the example. Sets opacity and not-allowed cursor.
CSS
.tab-disabled, .tab:disabled {
  opacity: var(--m-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}
Modifier Modifier, combined with the tabs class. On a <div> in the example. Sets corner radius, shadow and border.
CSS
.tabs-line > .tab {
  border-radius: 0;
}

.tabs-line:not(:has(> .tab-content)) {
  box-shadow: inset 0 -1px 0 var(--border);
}
Modifier Modifier, combined with the tabs class. On a <nav> in the example. Sets gap, padding, generated content, absolute position, offsets and stacking order.
CSS
.tabs-boxed > .tab-content {
  margin-inline: -.25rem;
}

.tabs-boxed {
  gap: .125rem;
  padding-inline: .1875rem;
}
Modifier Modifier, combined with the tabs class. Not used in the example above. Sets gap, corner radius, background and text color.
CSS
.tabs-pills {
  gap: .25rem;
}

.tabs-pills > .tab {
  border-radius: var(--m-radius-full);
}
Modifier Modifier, combined with the tabs class. Not used in the example above. Sets stacking order, border, corner radius, background, shadow and padding.
CSS
.tabs-lifted:not(:has(> .tab-content)) {
  box-shadow: inset 0 -1px 0 var(--border);
}

.tabs-lifted > .tab {
  z-index: 1;
  border: var(--m-border-width) solid transparent;
  border-bottom: 0;
  border-radius: var(--m-radius-lg) var(--m-radius-lg) 0 0;
}
Size Extra small size. Not used in the example above. Sets --tab-h, --tab-px and --tab-fs.
CSS
.tabs-xs {
  --tab-h: var(--m-control-h-xs);
  --tab-px: var(--m-control-px-xs);
  --tab-fs: var(--m-control-fs-xs);
}
Size Small size. Not used in the example above. Sets --tab-h, --tab-px and --tab-fs.
CSS
.tabs-sm {
  --tab-h: var(--m-control-h-sm);
  --tab-px: var(--m-control-px-sm);
  --tab-fs: var(--m-control-fs-sm);
}
Size Medium, the default size. Not used in the example above. Sets --tab-h, --tab-px and --tab-fs.
CSS
.tabs-md {
  --tab-h: var(--m-control-h-md);
  --tab-px: var(--m-control-px-md);
  --tab-fs: var(--m-control-fs-md);
}
Size Large size. Not used in the example above. Sets --tab-h, --tab-px and --tab-fs.
CSS
.tabs-lg {
  --tab-h: var(--m-control-h-lg);
  --tab-px: var(--m-control-px-lg);
  --tab-fs: var(--m-control-fs-lg);
}
Size Extra large size. Not used in the example above. Sets --tab-h, --tab-px and --tab-fs.
CSS
.tabs-xl {
  --tab-h: var(--m-control-h-xl);
  --tab-px: var(--m-control-px-xl);
  --tab-fs: var(--m-control-fs-xl);
}
Modifier Modifier, combined with the tabs class. Not used in the example above. Sets alignment.
CSS
.tabs-full > .tab {
  flex: 1 1 0;
}

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

<!-- Tabs: start from the base class, then add modifiers -->
<div class="tabs tabs-line" role="tablist"><input type="radio" name="project-tabs" class="tab" aria-label="Overview" checked><div class="tab-content" role="tabpanel">Traffic is up 12 percent this week.</div><input type="radio" name="project-tabs" class="tab" aria-label="Deployments"><div class="tab-content" role="tabpanel">Last deployment finished 4 minutes ago.</div><input type="radio" name="project-tabs" class="tab" aria-label="Settings"><div class="tab-content" role="tabpanel">Domains, environment variables and team access.</div></div><nav class="tabs tabs-boxed mt-6 w-fit" aria-label="Range"><a href="#" class="tab tab-active" aria-current="page">Day</a><a href="#" class="tab">Week</a><a href="#" class="tab">Month</a><a href="#" class="tab tab-disabled">Year</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

  • Give every control a visible label linked with for, or an aria-label when the purpose is obvious from context. Link help and error text with aria-describedby; invalid styles use :user-invalid, so they appear only after the user interacts.
  • Checkboxes and radios stay real inputs, so they keep native keyboard behavior (Space toggles, arrow keys move within a radio group) and form submission.
  • Tabs follow the tabs pattern: role="tablist", role="tab" with aria-selected, and role="tabpanel".
  • 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 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 overlaysSidebarAn app sidebar with a header, titled sections, icon items, badges, collapsible groups on <details>, a footer and a compact icon only mode.Navigation and overlaysBreadcrumbsThe path to the current page with chevron or slash separators and an optional pill container.Navigation and overlaysPaginationPage links with previous and next, an ellipsis, the current page, disabled items, three sizes and pill or joined styles.

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.