Monsoon v0.2.0
Made by Alexandre Kohler Star

Interactive

Tree view

Nested lists become a WAI-ARIA tree: Up and Down move, Right expands, Left collapses or goes to the parent, Home, End, type ahead and * to expand siblings. data-open starts a branch expanded. Needs monsoon.js.

Interactive4 classesNeeds monsoon.jsLight and dark

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

Full

JavaScript API

Attribute

data-m-tree

Options

OptionDescription
data-open on a branch
data-value on an item
aria-multiselectable="true" on the tree

Methods

MethodDescription
Monsoon.tree(el).expandAll()
Monsoon.tree(el).collapseAll()
Monsoon.tree(el).expand(item)
Monsoon.tree(el).selected

Events

EventDescription
monsoon:tree-toggle { item, expanded, value }
monsoon:tree-select { item, value }

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 tree view. On an <ul> in the example. Sets margin, padding, text size, border, hidden by default and font weight, and --tone and --tone-fg.
CSS
.tree [role=treeitem] {
  outline: 0;
}

.tree [role=group]:dir(rtl) {
  margin-inline: 0 .8125rem;
}
Modifier Modifier, combined with the tree class. Not used in the example above. Sets flex display, alignment, gap, height, padding and corner radius.
CSS
.tree-row:hover {
  background-color: var(--muted);
}

.tree-row {
  display: flex;
  align-items: center;
  gap: .375rem;
  min-height: 2rem;
  padding: .25rem .5rem .25rem .25rem;
  border-radius: var(--m-radius-md);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color var(--m-duration-fast);
}
Modifier Modifier, combined with the tree class. Not used in the example above. Sets alignment, width, height, background, transition and transform.
CSS
.tree-toggle:dir(rtl) {
  scale: -1 1;
}

.tree-toggle {
  flex: none;
  width: 1rem;
  height: 1rem;
  background-color: var(--muted-foreground);
  mask: var(--m-ix-right) center / contain no-repeat;
  transition: rotate var(--m-duration) var(--m-ease);
}
Modifier Modifier, combined with the tree class. Not used in the example above. Sets flex display, alignment, gap, width, overflow and text style.
CSS
.tree-label > svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--muted-foreground);
}

.tree-label {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

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.

index.html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/monsooncss">
<script src="https://cdn.jsdelivr.net/npm/monsooncss/dist/monsoon.js" defer></script>

<!-- Tree view: start from the base class, then add modifiers -->
<ul class="tree max-w-xs" data-m-tree aria-label="Project files">
  <li data-open><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>src
    <ul>
      <li data-open><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>components
        <ul>
          <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>button.css</li>
          <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>datepicker.mjs</li>
          <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>tree.mjs</li>
        </ul>
      </li>
      <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg>tokens
        <ul>
          <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>color.mjs</li>
          <li><svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>spacing.mjs</li>
<!-- the full example is in the Code tab above -->

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

  • 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.
InteractiveTree with checkboxesWith data-m-tree-checkbox every item gets a tristate checkbox: checking a branch checks everything below it, and a branch with some checked children shows as mixed. Space or Enter toggles. Needs monsoon.js.InteractiveColor pickerA saturation and brightness area, hue and opacity sliders, a hex, rgb or oklch field, swatches and the eyedropper where the browser has one, over a native color input. Needs monsoon.js.InteractiveData tableSorting by column (numbers, money and dates sort as such), a filter box, pagination, row selection with checkboxes and Shift for ranges, a column menu and a sticky header, on top of an existing table. Needs monsoon.js.InteractiveSplit panesResizable 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.

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.