Hierarchy & Trees
Collapsible Tree
An indented three-level company tree — divisions, teams, then people — with rotating chevrons, guide rails and headcount pills; on a loop one division opens and drills into its first team, children sliding in one after another as the previous branch collapses.
csslight complexitysubtle motionclickmobile-readyaccessible
Open on the canvas to copy the code → Free account · 3 copies a day · membership goes unlimited
Worth keeping?
Votes steer what gets built next — sign in to cast one, free to read
When to use it
Department or file explorers, nested settings, category pickers, any deep hierarchy that must stay compact until asked — and org structures too tall to draw as boxes and lines.
When not to
When every level must be visible at once, or when the tree is so deep that indentation runs out of horizontal room (past ~4 levels on a narrow tile).
Working with an AI agent
Every component ships agent-ready metadata. An example instruction for this one:
Edit the tree array — nested {n name, m count, t sub-label, k children} to any depth; rows, rails, chevrons and stagger all derive from it. Change the beat with setInterval(advance,2400) and the drill-in delay (440ms), or delete both and keep the row click handlers for a plain interactive tree. Re-theme to light by setting --pro-bg:#f6f8fa; --pro-surface:#ffffff; --pro-border:rgba(0,0,0,.08); --pro-text:#1f2328; --pro-muted:#59636e (keep --pro-accent), and update the catalog bg field to match. Theme: dark tokens live in :root, the light variant in :root[data-theme="light"]; ?theme=light or a {type:'forever:theme'} postMessage switches at runtime.
Safe to edit
- theme tokens (:root --pro-* dark defaults + the :root[data-theme="light"] overrides)
- the hierarchy itself (nested tree array: n, m, t, k children — any depth)
- row heights (--ctr-row, --ctr-rowb, --ctr-row3) — these are what make open/close animatable
- cycle beat (setInterval(advance,2400) — short enough that the mount audit sees the wall tile move) and drill-in delay (440ms)
- child stagger step (i*80ms in toggle())
- guide rail colour (--ctr-rail) and indent (.ctr-kids margin/padding)
Keep intact
- :root --pro-* token block (renaming breaks the shared pro theming API)
- role=img + aria-label on .ctr-stage
- IIFE wrapper
- fixed row-height tokens — height:0 to var(--ctr-row) is what animates; height:auto cannot be transitioned
- prefers-reduced-motion early return with the first division and team open
- visibilitychange pause (halt/play on the interval)
- border-width in the .ctr-row transition list, so collapsed rows really reach zero height
- theme hook (?theme= pre-paint bootstrap + forever:theme message listener + the two-palette token block)
Known limitations
- Light re-theme via the --pro-* block; catalog bg/accent describe the dark default
- Rows are a fixed height per depth, so a long label ellipsizes rather than wrapping to a second line
- Depth-3 rows are hidden below 320px (media query) — small tiles show two levels
- Only one branch is open at a time by design; multi-open needs the only() call replaced with a plain toggle
More Hierarchy & Trees components
- Org Tree RevealA three-level engineering org chart of eight people drawn with elbow connectors; the selection walks the org, lighting the whole reporting line from the…
- Branch TimelineA three-lane commit graph that draws itself top to bottom: the trunk advances, a feature branch splits off through two commits and merges back, then a…
- Radial HierarchySix divisions sit on an inner ring with their teams fanned out on an outer ring, spokes running back to a central hub; the whole diagram turns slowly…
- Decision TreeAn order-approval decision tree: a risk check branches to a country check and an amount check, fanning out to four outcome pills; each pass lights one…
- Mind Map BranchesSix curved limbs grow outward from a central topic pill one at a time, each sprouting two node dots before landing on a labelled chip with its open-item…