Organisation Tree

Hierarchical organisational structure.

html

<details class="orgtree orgtree--comfortable" style="--c:#A8E6C1;" open>
  <summary class="orgtree__label">Clydeford Ltd</summary>
  <ul class="orgtree__children">
    <li>
      <details>
        <summary class="orgtree__label">Engineering</summary>
        <ul class="orgtree__children">
          <li><span class="orgtree__leaf">Platform</span></li>
          <li><span class="orgtree__leaf">Product</span></li>
        </ul>
      </details>
    </li>
    <li><span class="orgtree__leaf">Design</span></li>
  </ul>
</details>
<style>
.orgtree { font: 14px/1.5 system-ui, sans-serif; color: #241430; }
.orgtree__label { cursor: pointer; padding: 4px 8px; border-left: 3px solid var(--c); font-weight: 600; }
.orgtree__label:focus-visible { outline: 2px solid var(--c); }
.orgtree__children { margin: 0; padding-left: 22px; list-style: none; border-left: 1px dashed #24143033; }
.orgtree__leaf { display: inline-block; padding: 4px 8px; }
.orgtree--compact .orgtree__label, .orgtree--compact .orgtree__leaf { padding: 2px 6px; }
</style>

tailwind

<details class="orgtree-tw orgtree-tw--comfortable font-sans text-[#241430]" style="--c:#A8E6C1;" open>
  <summary class="orgtree-tw__label cursor-pointer px-2 py-1 border-l-[3px] font-semibold" style="border-color:var(--c);">Clydeford Ltd</summary>
  <ul class="ml-0 pl-5 list-none border-l border-dashed border-[#24143033]">
    <li>
      <details>
        <summary class="orgtree-tw__label cursor-pointer px-2 py-1 border-l-[3px] font-semibold" style="border-color:var(--c);">Engineering</summary>
        <ul class="ml-0 pl-5 list-none border-l border-dashed border-[#24143033]">
          <li><span class="orgtree-tw__leaf inline-block px-2 py-1">Platform</span></li>
          <li><span class="orgtree-tw__leaf inline-block px-2 py-1">Product</span></li>
        </ul>
      </details>
    </li>
    <li><span class="orgtree-tw__leaf inline-block px-2 py-1">Design</span></li>
  </ul>
</details>
<style>
.orgtree-tw--compact .orgtree-tw__label, .orgtree-tw--compact .orgtree-tw__leaf { padding-top: 2px; padding-bottom: 2px; }
</style>

react

export function OrganisationTree({
  rootName = "Clydeford Ltd",
  expanded = true,
  color = "#A8E6C1",
  density = "comfortable",
}) {
  const pad = density === "compact" ? "2px 6px" : "4px 8px";
  const label = { cursor: "pointer", padding: pad, borderLeft: `3px solid ${color}`, fontWeight: 600 };
  const children = { margin: 0, paddingLeft: 22, listStyle: "none", borderLeft: "1px dashed #24143033" };
  return (
    <details open={expanded} style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430" }}>
      <summary style={label}>{rootName}</summary>
      <ul style={children}>
        <li>
          <details>
            <summary style={label}>Engineering</summary>
            <ul style={children}>
              <li><span style={{ display: "inline-block", padding: pad }}>Platform</span></li>
              <li><span style={{ display: "inline-block", padding: pad }}>Product</span></li>
            </ul>
          </details>
        </li>
        <li><span style={{ display: "inline-block", padding: pad }}>Design</span></li>
      </ul>
    </details>
  );
}