Interactive
Split panes
Resizable panes side by side or stacked: drag the separator, or focus it and use the arrows (Shift for bigger steps), Home, End and Enter to collapse. Minimum sizes, and sizes saved in localStorage when asked. Needs monsoon.js.
Needs monsoon.js. The styles work on their own, and the behavior comes from the optional interactive layer: add <script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script> or import 'monsooncss/js'. See the interactive layer.
Example
<div class="splitter h-72" data-m-splitter data-m-splitter-sizes="28,72" data-m-splitter-label="Resize sidebar">
<nav class="splitter-pane p-4 text-sm" data-min="18">
<p class="font-semibold mb-2">Inbox</p>
<p class="text-muted-foreground">Drafts</p>
<p class="text-muted-foreground">Sent</p>
<p class="text-muted-foreground">Archive</p>
</nav>
<div class="splitter splitter-vertical border-0 rounded-none min-h-0" data-m-splitter data-m-splitter-label="Resize preview">
<div class="splitter-pane p-4 text-sm"><p class="font-semibold">Quarterly review</p><p class="text-muted-foreground">Ana, Oct 12</p></div>
<div class="splitter-pane p-4 text-sm bg-surface-2"><p class="text-muted-foreground">Drag the separators, or focus one and use the arrow keys.</p></div>
</div>
</div>JavaScript API
Attribute
data-m-splitter
Options
| Option | Description |
|---|---|
data-m-splitter-sizes="30,70" | |
data-m-splitter-min="15" (percent, or data-min on a pane) | |
data-m-splitter-persist="editor" (a localStorage key) | |
data-m-splitter-label="Resize sidebar" |
Methods
| Method | Description |
|---|---|
Monsoon.splitter(el).sizes | |
Monsoon.splitter(el).sizes = [25, 75] | |
Monsoon.splitter(el).reset() |
Events
| Event | Description |
|---|---|
monsoon:split { sizes } |
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.
| Class | Type | What it does |
|---|---|---|
| Base | Base class of the split panes. On a <div> in the example. Sets flex display, width, height, overflow, background and border.CSS |
|
| Modifier | Modifier, combined with the splitter class. On a <div> in the example. Sets alignment, width, height, row-resize cursor and offsets.CSS |
|
| Part | Part of the split panes. On a <nav> in the example. Sets alignment, width, height and overflow.CSS |
|
| Modifier | Modifier, combined with the splitter class. Not used in the example above. Sets stacking order, alignment, width, background, col-resize cursor and transition.CSS |
Usage
The styles ship inside the same stylesheet as the utilities, and the behavior comes from the optional monsoon.js script, which enhances any element with a matching data-m attribute, including markup added later.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>
<!-- Split panes: start from the base class, then add modifiers -->
<div class="splitter h-72" data-m-splitter data-m-splitter-sizes="28,72" data-m-splitter-label="Resize sidebar">
<nav class="splitter-pane p-4 text-sm" data-min="18">
<p class="font-semibold mb-2">Inbox</p>
<p class="text-muted-foreground">Drafts</p>
<p class="text-muted-foreground">Sent</p>
<p class="text-muted-foreground">Archive</p>
</nav>
<div class="splitter splitter-vertical border-0 rounded-none min-h-0" data-m-splitter data-m-splitter-label="Resize preview">
<div class="splitter-pane p-4 text-sm"><p class="font-semibold">Quarterly review</p><p class="text-muted-foreground">Ana, Oct 12</p></div>
<div class="splitter-pane p-4 text-sm bg-surface-2"><p class="text-muted-foreground">Drag the separators, or focus one and use the arrow keys.</p></div>
</div>
</div>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
navwith anaria-labelwhen there is more than one on the page, and mark the current link witharia-current="page". - Every interactive part shows a visible focus ring with
:focus-visible, and tone colors pair with-foregroundtokens that keep text at 4.5:1 or better in light and dark mode.