Open demo

CSS code

HTML 
<div class="grid">
<div><span class="lbl">Straight connectors</span>
<div class="dt-card">
<ul class="dt dt-mono">
  <li><details open><summary>acme-store/</summary>
    <ul>
      <li><details open><summary>src/</summary>
        <ul>
          <li><details open><summary>components/</summary>
            <ul>
              <li><span class="dt-leaf">Header.astro</span></li>
              <li><span class="dt-leaf">ProductCard.astro</span></li>
              <li><span class="dt-leaf">CartDrawer.astro</span></li>
            </ul>
          </details></li>
          <li><details><summary>pages/</summary>
            <ul>
              <li><span class="dt-leaf">index.astro</span></li>
              <li><span class="dt-leaf">cart.astro</span></li>
              <li><span class="dt-leaf">checkout.astro</span></li>
            </ul>
          </details></li>
          <li><details open><summary>styles/</summary>
            <ul>
              <li><span class="dt-leaf">global.css</span></li>
              <li><span class="dt-leaf">tokens.css</span></li>
            </ul>
          </details></li>
        </ul>
      </details></li>
      <li><details><summary>public/</summary>
        <ul>
          <li><span class="dt-leaf">favicon.svg</span></li>
          <li><span class="dt-leaf">robots.txt</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf">package.json</span></li>
      <li><span class="dt-leaf">README.md</span></li>
    </ul>
  </details></li>
</ul>
</div>
</div>
<div><span class="lbl">Rounded connectors, plus and minus</span>
<div class="dt-card">
<ul class="dt dt-round">
  <li><span class="dt-leaf">Home</span></li>
  <li><details open><summary>Services</summary>
    <ul>
      <li><span class="dt-leaf">Check-ups & cleaning</span></li>
      <li><span class="dt-leaf">Teeth whitening</span></li>
      <li><span class="dt-leaf">Clear aligners</span></li>
      <li><span class="dt-leaf">Emergency care</span></li>
    </ul>
  </details></li>
  <li><details><summary>About us</summary>
    <ul>
      <li><span class="dt-leaf">Our dentists</span></li>
      <li><span class="dt-leaf">Practice tour</span></li>
    </ul>
  </details></li>
  <li><details open><summary>Patients</summary>
    <ul>
      <li><span class="dt-leaf">New patient forms</span></li>
      <li><details open><summary>Fees & insurance</summary>
        <ul>
          <li><span class="dt-leaf">Payment plans</span></li>
          <li><span class="dt-leaf">Accepted insurers</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf">FAQs</span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf">Book an appointment</span></li>
</ul>
</div>
</div>
<div><span class="lbl">Dotted guides with page numbers</span>
<div class="dt-card">
<ul class="dt dt-book">
  <li><details><summary><span class="nm">1 Getting started</span><span class="pg">1</span></summary>
    <ul>
      <li><span class="dt-leaf"><span class="nm">Binoculars and notebooks</span><span class="pg">3</span></span></li>
      <li><span class="dt-leaf"><span class="nm">Reading a range map</span><span class="pg">9</span></span></li>
    </ul>
  </details></li>
  <li><details open><summary><span class="nm">2 Songbirds</span><span class="pg">14</span></summary>
    <ul>
      <li><span class="dt-leaf"><span class="nm">Finches</span><span class="pg">16</span></span></li>
      <li><details open><summary><span class="nm">Thrushes</span><span class="pg">22</span></summary>
        <ul>
          <li><span class="dt-leaf"><span class="nm">Blackbird</span><span class="pg">24</span></span></li>
          <li><span class="dt-leaf"><span class="nm">Song thrush</span><span class="pg">27</span></span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf"><span class="nm">Tits and warblers</span><span class="pg">30</span></span></li>
    </ul>
  </details></li>
  <li><details><summary><span class="nm">3 Waterbirds</span><span class="pg">38</span></summary>
    <ul>
      <li><span class="dt-leaf"><span class="nm">Ducks and geese</span><span class="pg">40</span></span></li>
      <li><span class="dt-leaf"><span class="nm">Herons</span><span class="pg">47</span></span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf"><span class="nm">Index</span><span class="pg">52</span></span></li>
</ul>
</div>
</div>
</div>
CSS 
/* Details tree: nested lists with <details>/<summary> branches. Connector lines are ::before (the rail)
   and ::after (the elbow) on every nested <li>; the last child stops its rail at the elbow. No JavaScript. */
.dt{--dt-text:#1f2937;--dt-muted:#5b6577;--dt-line:#a7b0bd;--dt-accent:#0f766e;--dt-hover:#eef5f4;
  --dt-row:30px;--dt-indent:20px;--dt-radius:0px;--dt-style:solid}
.dt li{position:relative}
.dt ul>li{padding-left:var(--dt-indent)}
.dt ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px var(--dt-style) var(--dt-line)}
.dt ul>li::after{content:"";position:absolute;left:0;top:0;width:calc(var(--dt-indent) + 3px);height:calc(var(--dt-row) / 2);
  border:0 var(--dt-style) var(--dt-line);border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:var(--dt-radius)}
.dt ul>li:last-child::before{display:none}
.dt summary::-webkit-details-marker{display:none}
.dt summary::before{content:"";flex:none;box-sizing:border-box;width:8px;height:8px;margin:0 1px;
  border-right:2px solid var(--dt-muted);border-bottom:2px solid var(--dt-muted);transform:rotate(-45deg);transition:transform .16s ease}
.dt details[open]>summary::before{transform:rotate(45deg)}
.dt .dt-leaf::before{content:"";flex:none;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--dt-line)}
/* rounded elbows, boxed plus / minus drawn with two gradients */
.dt-round{--dt-radius:9px}
.dt-round summary::before{width:14px;height:14px;margin:0 -2px;border:1.5px solid var(--dt-accent);border-radius:4px;transform:none;
  background:linear-gradient(var(--dt-accent),var(--dt-accent)) center/8px 1.5px no-repeat,linear-gradient(var(--dt-accent),var(--dt-accent)) center/1.5px 8px no-repeat}
.dt-round details[open]>summary::before{transform:none;background-size:8px 1.5px,0 0}
.dt-round .dt-leaf::before{background:none;border:1.5px solid var(--dt-line)}
/* dotted guides and a dotted leader to the page number */
.dt-book{--dt-style:dotted;--dt-line:#8792a2}
.dt-book .nm::after{content:"";flex:1;min-width:12px;margin:0 6px 0 8px;border-bottom:1.5px dotted #b5bdc9;align-self:flex-end;margin-bottom:.45em}
@media (prefers-reduced-motion:reduce){.dt summary::before{transition:none}}
.dt,.dt ul{margin:0;padding:0;list-style:none}
.dt{font-size:.9rem;line-height:1.35;color:var(--dt-text)}
.dt ul{margin-left:13px}
.dt summary,.dt .dt-leaf{display:flex;align-items:center;gap:8px;min-height:var(--dt-row);padding:0 8px;border-radius:6px}
.dt summary{cursor:pointer;list-style:none;font-weight:600}
.dt summary:hover{background:var(--dt-hover)}
.dt summary:focus-visible{outline:2px solid var(--dt-accent);outline-offset:1px}
.dt-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem}
.dt-book .nm{flex:1;display:flex;align-items:center}
.dt-book .pg{margin-left:auto;padding-left:12px;color:var(--dt-muted);font-variant-numeric:tabular-nums}
.dt-card{background:#fff;border:1px solid #e2e7ee;border-radius:14px;padding:22px 20px;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div class="grid">
<div><span class="lbl">Straight connectors</span>
<div class="card dt-card rounded-4"><div class="card-body">
<ul class="dt dt-mono font-monospace list-unstyled mb-0">
  <li><details open><summary class="fw-semibold rounded-2">acme-store/</summary>
    <ul class="list-unstyled">
      <li><details open><summary class="fw-semibold rounded-2">src/</summary>
        <ul class="list-unstyled">
          <li><details open><summary class="fw-semibold rounded-2">components/</summary>
            <ul class="list-unstyled">
              <li><span class="dt-leaf rounded-2">Header.astro</span></li>
              <li><span class="dt-leaf rounded-2">ProductCard.astro</span></li>
              <li><span class="dt-leaf rounded-2">CartDrawer.astro</span></li>
            </ul>
          </details></li>
          <li><details><summary class="fw-semibold rounded-2">pages/</summary>
            <ul class="list-unstyled">
              <li><span class="dt-leaf rounded-2">index.astro</span></li>
              <li><span class="dt-leaf rounded-2">cart.astro</span></li>
              <li><span class="dt-leaf rounded-2">checkout.astro</span></li>
            </ul>
          </details></li>
          <li><details open><summary class="fw-semibold rounded-2">styles/</summary>
            <ul class="list-unstyled">
              <li><span class="dt-leaf rounded-2">global.css</span></li>
              <li><span class="dt-leaf rounded-2">tokens.css</span></li>
            </ul>
          </details></li>
        </ul>
      </details></li>
      <li><details><summary class="fw-semibold rounded-2">public/</summary>
        <ul class="list-unstyled">
          <li><span class="dt-leaf rounded-2">favicon.svg</span></li>
          <li><span class="dt-leaf rounded-2">robots.txt</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf rounded-2">package.json</span></li>
      <li><span class="dt-leaf rounded-2">README.md</span></li>
    </ul>
  </details></li>
</ul>
</div></div>
</div>
<div><span class="lbl">Rounded connectors, plus and minus</span>
<div class="card dt-card rounded-4"><div class="card-body">
<ul class="dt dt-round list-unstyled mb-0">
  <li><span class="dt-leaf rounded-2">Home</span></li>
  <li><details open><summary class="fw-semibold rounded-2">Services</summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2">Check-ups & cleaning</span></li>
      <li><span class="dt-leaf rounded-2">Teeth whitening</span></li>
      <li><span class="dt-leaf rounded-2">Clear aligners</span></li>
      <li><span class="dt-leaf rounded-2">Emergency care</span></li>
    </ul>
  </details></li>
  <li><details><summary class="fw-semibold rounded-2">About us</summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2">Our dentists</span></li>
      <li><span class="dt-leaf rounded-2">Practice tour</span></li>
    </ul>
  </details></li>
  <li><details open><summary class="fw-semibold rounded-2">Patients</summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2">New patient forms</span></li>
      <li><details open><summary class="fw-semibold rounded-2">Fees & insurance</summary>
        <ul class="list-unstyled">
          <li><span class="dt-leaf rounded-2">Payment plans</span></li>
          <li><span class="dt-leaf rounded-2">Accepted insurers</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf rounded-2">FAQs</span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf rounded-2">Book an appointment</span></li>
</ul>
</div></div>
</div>
<div><span class="lbl">Dotted guides with page numbers</span>
<div class="card dt-card rounded-4"><div class="card-body">
<ul class="dt dt-book list-unstyled mb-0">
  <li><details><summary class="fw-semibold rounded-2"><span class="nm">1 Getting started</span><span class="pg text-body-secondary">1</span></summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2"><span class="nm">Binoculars and notebooks</span><span class="pg text-body-secondary">3</span></span></li>
      <li><span class="dt-leaf rounded-2"><span class="nm">Reading a range map</span><span class="pg text-body-secondary">9</span></span></li>
    </ul>
  </details></li>
  <li><details open><summary class="fw-semibold rounded-2"><span class="nm">2 Songbirds</span><span class="pg text-body-secondary">14</span></summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2"><span class="nm">Finches</span><span class="pg text-body-secondary">16</span></span></li>
      <li><details open><summary class="fw-semibold rounded-2"><span class="nm">Thrushes</span><span class="pg text-body-secondary">22</span></summary>
        <ul class="list-unstyled">
          <li><span class="dt-leaf rounded-2"><span class="nm">Blackbird</span><span class="pg text-body-secondary">24</span></span></li>
          <li><span class="dt-leaf rounded-2"><span class="nm">Song thrush</span><span class="pg text-body-secondary">27</span></span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf rounded-2"><span class="nm">Tits and warblers</span><span class="pg text-body-secondary">30</span></span></li>
    </ul>
  </details></li>
  <li><details><summary class="fw-semibold rounded-2"><span class="nm">3 Waterbirds</span><span class="pg text-body-secondary">38</span></summary>
    <ul class="list-unstyled">
      <li><span class="dt-leaf rounded-2"><span class="nm">Ducks and geese</span><span class="pg text-body-secondary">40</span></span></li>
      <li><span class="dt-leaf rounded-2"><span class="nm">Herons</span><span class="pg text-body-secondary">47</span></span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf rounded-2"><span class="nm">Index</span><span class="pg text-body-secondary">52</span></span></li>
</ul>
</div></div>
</div>
</div>
CSS 
/* Details tree: nested lists with <details>/<summary> branches. Connector lines are ::before (the rail)
   and ::after (the elbow) on every nested <li>; the last child stops its rail at the elbow. No JavaScript. */
.dt{--dt-text:#1f2937;--dt-muted:#5b6577;--dt-line:#a7b0bd;--dt-accent:#0f766e;--dt-hover:#eef5f4;
  --dt-row:30px;--dt-indent:20px;--dt-radius:0px;--dt-style:solid}
.dt li{position:relative}
.dt ul>li{padding-left:var(--dt-indent)}
.dt ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px var(--dt-style) var(--dt-line)}
.dt ul>li::after{content:"";position:absolute;left:0;top:0;width:calc(var(--dt-indent) + 3px);height:calc(var(--dt-row) / 2);
  border:0 var(--dt-style) var(--dt-line);border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:var(--dt-radius)}
.dt ul>li:last-child::before{display:none}
.dt summary::-webkit-details-marker{display:none}
.dt summary::before{content:"";flex:none;box-sizing:border-box;width:8px;height:8px;margin:0 1px;
  border-right:2px solid var(--dt-muted);border-bottom:2px solid var(--dt-muted);transform:rotate(-45deg);transition:transform .16s ease}
.dt details[open]>summary::before{transform:rotate(45deg)}
.dt .dt-leaf::before{content:"";flex:none;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--dt-line)}
/* rounded elbows, boxed plus / minus drawn with two gradients */
.dt-round{--dt-radius:9px}
.dt-round summary::before{width:14px;height:14px;margin:0 -2px;border:1.5px solid var(--dt-accent);border-radius:4px;transform:none;
  background:linear-gradient(var(--dt-accent),var(--dt-accent)) center/8px 1.5px no-repeat,linear-gradient(var(--dt-accent),var(--dt-accent)) center/1.5px 8px no-repeat}
.dt-round details[open]>summary::before{transform:none;background-size:8px 1.5px,0 0}
.dt-round .dt-leaf::before{background:none;border:1.5px solid var(--dt-line)}
/* dotted guides and a dotted leader to the page number */
.dt-book{--dt-style:dotted;--dt-line:#8792a2}
.dt-book .nm::after{content:"";flex:1;min-width:12px;margin:0 6px 0 8px;border-bottom:1.5px dotted #b5bdc9;align-self:flex-end;margin-bottom:.45em}
@media (prefers-reduced-motion:reduce){.dt summary::before{transition:none}}
.dt{font-size:.9rem;line-height:1.35;color:var(--dt-text)}
.dt ul{margin:0 0 0 13px}
.dt summary,.dt .dt-leaf{display:flex;align-items:center;gap:8px;min-height:var(--dt-row);padding:0 8px}
.dt summary{list-style:none}
.dt summary:hover{background:var(--dt-hover)}
.dt summary:focus-visible{outline:2px solid var(--dt-accent);outline-offset:1px}
.dt-mono{font-size:.84rem}
.dt-book .nm{flex:1;display:flex;align-items:center}
.dt-book .pg{margin-left:auto;padding-left:12px;font-variant-numeric:tabular-nums}
.dt-card{--bs-card-border-color:#e2e7ee;--bs-card-spacer-y:22px;--bs-card-spacer-x:20px;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div class="grid grid-cols-[repeat(auto-fit,minmax(min(100%,300px),1fr))] items-start gap-7">
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Straight connectors</span>
<div class="rounded-[14px] border border-[#e2e7ee] bg-white px-5 py-[22px] shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)]">
<ul class="dt dt-mono font-mono text-[.84rem] m-0 list-none p-0 text-[.9rem] leading-[1.35] text-[#1f2937]">
  <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">acme-store/</summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">src/</summary>
        <ul class="m-0 ml-[13px] list-none p-0">
          <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">components/</summary>
            <ul class="m-0 ml-[13px] list-none p-0">
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Header.astro</span></li>
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">ProductCard.astro</span></li>
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">CartDrawer.astro</span></li>
            </ul>
          </details></li>
          <li><details><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">pages/</summary>
            <ul class="m-0 ml-[13px] list-none p-0">
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">index.astro</span></li>
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">cart.astro</span></li>
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">checkout.astro</span></li>
            </ul>
          </details></li>
          <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">styles/</summary>
            <ul class="m-0 ml-[13px] list-none p-0">
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">global.css</span></li>
              <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">tokens.css</span></li>
            </ul>
          </details></li>
        </ul>
      </details></li>
      <li><details><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">public/</summary>
        <ul class="m-0 ml-[13px] list-none p-0">
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">favicon.svg</span></li>
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">robots.txt</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">package.json</span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">README.md</span></li>
    </ul>
  </details></li>
</ul>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Rounded connectors, plus and minus</span>
<div class="rounded-[14px] border border-[#e2e7ee] bg-white px-5 py-[22px] shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)]">
<ul class="dt dt-round m-0 list-none p-0 text-[.9rem] leading-[1.35] text-[#1f2937]">
  <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Home</span></li>
  <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">Services</summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Check-ups & cleaning</span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Teeth whitening</span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Clear aligners</span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Emergency care</span></li>
    </ul>
  </details></li>
  <li><details><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">About us</summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Our dentists</span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Practice tour</span></li>
    </ul>
  </details></li>
  <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">Patients</summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">New patient forms</span></li>
      <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden">Fees & insurance</summary>
        <ul class="m-0 ml-[13px] list-none p-0">
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Payment plans</span></li>
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Accepted insurers</span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">FAQs</span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2">Book an appointment</span></li>
</ul>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Dotted guides with page numbers</span>
<div class="rounded-[14px] border border-[#e2e7ee] bg-white px-5 py-[22px] shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)]">
<ul class="dt dt-book m-0 list-none p-0 text-[.9rem] leading-[1.35] text-[#1f2937]">
  <li><details><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden"><span class="nm flex flex-1 items-center">1 Getting started</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">1</span></summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Binoculars and notebooks</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">3</span></span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Reading a range map</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">9</span></span></li>
    </ul>
  </details></li>
  <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden"><span class="nm flex flex-1 items-center">2 Songbirds</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">14</span></summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Finches</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">16</span></span></li>
      <li><details open><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden"><span class="nm flex flex-1 items-center">Thrushes</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">22</span></summary>
        <ul class="m-0 ml-[13px] list-none p-0">
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Blackbird</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">24</span></span></li>
          <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Song thrush</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">27</span></span></li>
        </ul>
      </details></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Tits and warblers</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">30</span></span></li>
    </ul>
  </details></li>
  <li><details><summary class="flex min-h-[30px] cursor-pointer list-none items-center gap-2 rounded-md px-2 font-semibold hover:bg-[#eef5f4] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0f766e] [&::-webkit-details-marker]:hidden"><span class="nm flex flex-1 items-center">3 Waterbirds</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">38</span></summary>
    <ul class="m-0 ml-[13px] list-none p-0">
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Ducks and geese</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">40</span></span></li>
      <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Herons</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">47</span></span></li>
    </ul>
  </details></li>
  <li><span class="dt-leaf flex min-h-[30px] items-center gap-2 rounded-md px-2"><span class="nm flex flex-1 items-center">Index</span><span class="pg ml-auto pl-3 text-[#5b6577] tabular-nums">52</span></span></li>
</ul>
</div>
</div>
</div>
CSS 
/* Details tree: nested lists with <details>/<summary> branches. Connector lines are ::before (the rail)
   and ::after (the elbow) on every nested <li>; the last child stops its rail at the elbow. No JavaScript. */
.dt{--dt-text:#1f2937;--dt-muted:#5b6577;--dt-line:#a7b0bd;--dt-accent:#0f766e;--dt-hover:#eef5f4;
  --dt-row:30px;--dt-indent:20px;--dt-radius:0px;--dt-style:solid}
.dt li{position:relative}
.dt ul>li{padding-left:var(--dt-indent)}
.dt ul>li::before{content:"";position:absolute;left:0;top:0;bottom:0;border-left:1.5px var(--dt-style) var(--dt-line)}
.dt ul>li::after{content:"";position:absolute;left:0;top:0;width:calc(var(--dt-indent) + 3px);height:calc(var(--dt-row) / 2);
  border:0 var(--dt-style) var(--dt-line);border-left-width:1.5px;border-bottom-width:1.5px;border-bottom-left-radius:var(--dt-radius)}
.dt ul>li:last-child::before{display:none}
.dt summary::-webkit-details-marker{display:none}
.dt summary::before{content:"";flex:none;box-sizing:border-box;width:8px;height:8px;margin:0 1px;
  border-right:2px solid var(--dt-muted);border-bottom:2px solid var(--dt-muted);transform:rotate(-45deg);transition:transform .16s ease}
.dt details[open]>summary::before{transform:rotate(45deg)}
.dt .dt-leaf::before{content:"";flex:none;width:6px;height:6px;margin:0 2px;border-radius:50%;background:var(--dt-line)}
/* rounded elbows, boxed plus / minus drawn with two gradients */
.dt-round{--dt-radius:9px}
.dt-round summary::before{width:14px;height:14px;margin:0 -2px;border:1.5px solid var(--dt-accent);border-radius:4px;transform:none;
  background:linear-gradient(var(--dt-accent),var(--dt-accent)) center/8px 1.5px no-repeat,linear-gradient(var(--dt-accent),var(--dt-accent)) center/1.5px 8px no-repeat}
.dt-round details[open]>summary::before{transform:none;background-size:8px 1.5px,0 0}
.dt-round .dt-leaf::before{background:none;border:1.5px solid var(--dt-line)}
/* dotted guides and a dotted leader to the page number */
.dt-book{--dt-style:dotted;--dt-line:#8792a2}
.dt-book .nm::after{content:"";flex:1;min-width:12px;margin:0 6px 0 8px;border-bottom:1.5px dotted #b5bdc9;align-self:flex-end;margin-bottom:.45em}
@media (prefers-reduced-motion:reduce){.dt summary::before{transition:none}}

About this set

Three tree views built only from nested lists and the details and summary elements, with no JavaScript at all. Straight connectors shows a project folder in a monospace face with right-angled elbow lines and a rotating chevron. Rounded connectors, plus and minus draws a dental practice site map with curved elbows and a boxed plus that turns into a minus when the branch opens. Dotted guides with page numbers lays out a field guide’s contents with dotted rails and a dotted leader to each page number. Use the first for code and file structures, the second for site maps and category lists, and the third for tables of contents. Every nested list item draws its own connector: a ::before pseudo-element is the vertical rail and an ::after pseudo-element is the elbow, and the last child stops its rail at the elbow so no line hangs below the final item. Because the branches are native details elements, the browser handles opening, closing and keyboard access, and the tree still reads as a nested list when the CSS fails to load.

What’s included

  • Three connector styles: straight, rounded with plus and minus, dotted with page numbers
  • No JavaScript: native details and summary for every branch
  • Connector lines drawn with ::before and ::after, last child trimmed
  • Indent, row height, line style and corner radius set by custom properties
  • Plain CSS, Bootstrap 5 and Tailwind CSS 4 versions of the same design

Accessibility

Each branch is a summary element, so it is announced as an expandable button with its open or closed state, and Tab, Enter and Space work without any script. Summaries show a 2px teal outline on keyboard focus. Text and the grey page numbers meet 4.5:1, and the chevron rotation is switched off under prefers-reduced-motion.

Customise it

Change --dt-line, --dt-accent, --dt-text and --dt-hover on .dt for colour, and --dt-row, --dt-indent, --dt-radius and --dt-style for row height, indent, elbow rounding and solid or dotted lines. The same variables drive the Bootstrap and Tailwind versions.