File Explorer Tree Views in CSS, Bootstrap & Tailwind

Open demo

CSS code

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="ft-folder" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h8.3A1.6 1.6 0 0 1 21 8.8v9.6a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 18.4z" fill="currentColor"/></symbol>
  <symbol id="ft-folder-open" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h7.3A1.6 1.6 0 0 1 20 8.8V10H7.4a1.6 1.6 0 0 0-1.5 1.1L3 18.6z" fill="currentColor" opacity=".55"/><path d="M6.4 11.3A1.6 1.6 0 0 1 7.9 10.2h13.2a1 1 0 0 1 .96 1.3l-2.2 7.3a1.6 1.6 0 0 1-1.5 1.2H4.3a1 1 0 0 1-.96-1.3z" fill="currentColor"/></symbol>
  <symbol id="ft-code" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M10 12.5l-2.2 2.3 2.2 2.3M14 12.5l2.2 2.3-2.2 2.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="ft-doc" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M8.4 13h7.2M8.4 16.6h5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
  <symbol id="ft-img" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M7.8 18.2l3.2-3.4 2 2 1.8-1.8 2 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9.6" cy="12" r="1.3" fill="currentColor"/></symbol>
  <symbol id="ft-chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<div class="grid">
<div><span class="lbl">Project explorer</span>
<div class="ft-card">
  <div class="ft-head"><p class="ft-title" id="fta-title">Explorer</p><span class="ft-count">18 files</span></div>
  <ul class="ft" role="tree" aria-label="Project files" data-tree data-status="fta-path">
    <li role="treeitem" aria-expanded="true" tabindex="-1">
      <div class="ft-row" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>trailhead-app</span></div>
      <ul role="group" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>.github</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-expanded="false" tabindex="-1">
              <div class="ft-row" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>workflows</span></div>
              <ul role="group" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>deploy.yml</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>public</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>favicon.svg</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>og-image.png</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>src</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>lib</span></div>
              <ul role="group" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>api.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>format.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>stores.ts</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>routes</span></div>
              <ul role="group" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+layout.svelte</span></div></li>
                <li role="treeitem" aria-selected="true" tabindex="0"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                <li role="treeitem" aria-expanded="false" tabindex="-1">
                  <div class="ft-row" data-row style="--d:3"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>trails</span></div>
                  <ul role="group" style="--d:3">
                    <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:4"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                    <li role="treeitem" aria-expanded="false" tabindex="-1">
                      <div class="ft-row" data-row style="--d:4"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>[slug]</span></div>
                      <ul role="group" style="--d:4">
                        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:5"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:5"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.ts</span></div></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-purple" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>app.css</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>package.json</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-slate" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>README.md</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>svelte.config.js</span></div></li>
      </ul>
    </li>
  </ul>
  <p class="ft-foot">Selected: <span class="ft-path" id="fta-path" aria-live="polite">trailhead-app/src/routes/+page.svelte</span></p>
</div>
</div>
<div><span class="lbl">Shared drive with file sizes</span>
<div class="ft-card">
  <div class="ft-head"><p class="ft-title" id="ftb-title">Team drive</p><span class="ft-count">3.9 GB of 15 GB</span></div>
  <ul class="ft" role="tree" aria-label="Team drive" data-tree>
    <li role="treeitem" aria-expanded="true" tabindex="-1">
      <div class="ft-row" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Marketing</span><span class="ft-meta">3 items</span></div>
      <ul role="group" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Brand</span><span class="ft-meta">2 items</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>logo-primary.svg</span><span class="ft-meta">12 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>brand-guidelines.pdf</span><span class="ft-meta">4.2 MB</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Campaigns</span><span class="ft-meta">2 folders</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Spring launch</span><span class="ft-meta">3 items</span></div>
              <ul role="group" style="--d:2">
                <li role="treeitem" aria-selected="true" tabindex="0"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>brief.docx</span><span class="ft-meta">86 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>hero-banner.png</span><span class="ft-meta">1.8 MB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>budget.xlsx</span><span class="ft-meta">42 KB</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="false" tabindex="-1">
              <div class="ft-row" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Black Friday</span><span class="ft-meta">2 items</span></div>
              <ul role="group" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>offer-grid.png</span><span class="ft-meta">960 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>email-copy.docx</span><span class="ft-meta">38 KB</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>press-release-march.docx</span><span class="ft-meta">64 KB</span></div></li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1">
      <div class="ft-row" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Finance</span><span class="ft-meta">2 items</span></div>
      <ul role="group" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>q1-report.xlsx</span><span class="ft-meta">220 KB</span></div></li>
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Invoices</span><span class="ft-meta">2 items</span></div>
          <ul role="group" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>inv-2041.pdf</span><span class="ft-meta">118 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>inv-2042.pdf</span><span class="ft-meta">121 KB</span></div></li>
          </ul>
        </li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1">
      <div class="ft-row" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>People</span><span class="ft-meta">2 items</span></div>
      <ul role="group" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>onboarding-checklist.pdf</span><span class="ft-meta">310 KB</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>holiday-calendar.xlsx</span><span class="ft-meta">28 KB</span></div></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</div>

CSS

/* File explorer tree (WAI-ARIA tree pattern). The row is indented with --d, the nesting depth,
   so hover and selection span the full width. Folders swap a closed and an open icon. */
.ft{--ft-text:#1f2937;--ft-muted:#5f6b7c;--ft-hover:#f1f4f9;--ft-sel:#e6efff;--ft-sel-text:#1e40af;--ft-focus:#2563eb;--ft-indent:16px}
.ft [role="treeitem"]{outline:none}
.ft [aria-expanded="false"]>[role="group"]{display:none}
.ft-row{height:30px;padding:0 10px 0 calc(var(--d,0) * var(--ft-indent) + 8px);cursor:pointer;user-select:none;white-space:nowrap}
.ft-row:hover{background:var(--ft-hover)}
.ft [aria-selected="true"]>.ft-row{background:var(--ft-sel);color:var(--ft-sel-text);font-weight:600}
.ft [role="treeitem"]:focus-visible>.ft-row{outline:2px solid var(--ft-focus);outline-offset:-2px}
.ft-chev{width:14px;height:14px;flex:none;color:var(--ft-muted);transition:transform .15s ease}
.ft [aria-expanded="true"]>.ft-row .ft-chev{transform:rotate(90deg)}
.ft-ico{width:18px;height:18px;flex:none}
.ft .ft-open,.ft [aria-expanded="true"]>.ft-row .ft-closed{display:none}
.ft [aria-expanded="true"]>.ft-row .ft-open{display:block}
.ft-sp{width:14px;flex:none}
.ft-name{overflow:hidden;text-overflow:ellipsis}
.ft-meta{font-size:.78rem;font-weight:400;font-variant-numeric:tabular-nums}
.c-folder{color:#d48a06}.c-blue{color:#2563eb}.c-orange{color:#ea580c}.c-purple{color:#7c3aed}.c-amber{color:#b45309}.c-green{color:#15803d}.c-red{color:#dc2626}.c-slate{color:#5f6b7c}
@media (prefers-reduced-motion:reduce){.ft-chev{transition:none}}
.ft,.ft ul{margin:0;padding:0;list-style:none}
.ft{padding:6px;font-size:.875rem;color:var(--ft-text)}
.ft-row{display:flex;align-items:center;gap:6px;border-radius:7px}
.ft-meta{margin-left:auto;padding-left:12px;color:var(--ft-muted)}
.ft-card{background:#fff;border:1px solid #e2e7ee;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}
.ft-head{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e9edf3}
.ft-title{margin:0;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#334155}
.ft-count{font-size:.78rem;color:var(--ft-muted)}
.ft-foot{margin:0;padding:10px 16px;border-top:1px solid #e9edf3;background:#f8fafc;font-size:.78rem;color:var(--ft-muted)}
.ft-path{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ft-text)}

JavaScript

/* WAI-ARIA tree view: one tab stop (roving tabindex), Up/Down move, Right opens or goes to the first child,
   Left closes or goes to the parent, Home/End, type-ahead, Enter/Space open a folder or select a file. */
document.querySelectorAll('[role="tree"][data-tree]').forEach(tree => {
  const all = () => [...tree.querySelectorAll('[role="treeitem"]')];
  const shown = () => all().filter(i => !i.parentElement.closest('[role="treeitem"][aria-expanded="false"]'));
  const isFolder = i => i.hasAttribute('aria-expanded');
  const parentOf = i => i.parentElement.closest('[role="treeitem"]');
  const nameOf = i => i.querySelector(':scope > [data-row] [data-name]').textContent.trim();
  const out = document.getElementById(tree.dataset.status || '');
  let typed = '', timer;
  const focus = i => { all().forEach(n => { n.tabIndex = -1; }); i.tabIndex = 0; i.focus(); };
  const toggle = (i, open = i.getAttribute('aria-expanded') !== 'true') => i.setAttribute('aria-expanded', String(open));
  const select = i => {
    all().forEach(n => { if (!isFolder(n)) n.setAttribute('aria-selected', 'false'); });
    i.setAttribute('aria-selected', 'true');
    if (out) { const p = []; for (let n = i; n; n = parentOf(n)) p.unshift(nameOf(n)); out.textContent = p.join('/'); }
  };
  tree.addEventListener('click', e => {
    const row = e.target.closest('[data-row]'); if (!row) return;
    const i = row.parentElement; focus(i); isFolder(i) ? toggle(i) : select(i);
  });
  tree.addEventListener('keydown', e => {
    const i = e.target.closest('[role="treeitem"]'); if (!i || e.altKey || e.ctrlKey || e.metaKey) return;
    const list = shown(), n = list.indexOf(i), open = i.getAttribute('aria-expanded') === 'true'; let to = null;
    switch (e.key) {
      case 'ArrowDown': to = list[n + 1]; break;
      case 'ArrowUp': to = list[n - 1]; break;
      case 'Home': to = list[0]; break;
      case 'End': to = list[list.length - 1]; break;
      case 'ArrowRight': if (isFolder(i)) open ? to = i.querySelector('[role="treeitem"]') : toggle(i, true); break;
      case 'ArrowLeft': if (isFolder(i) && open) toggle(i, false); else to = parentOf(i); break;
      case 'Enter': case ' ': isFolder(i) ? toggle(i) : select(i); break;
      case '*': [...i.parentElement.children].filter(isFolder).forEach(s => toggle(s, true)); break;
      default: {
        if (e.key.length !== 1 || !/\S/.test(e.key)) return;
        typed += e.key.toLowerCase(); clearTimeout(timer); timer = setTimeout(() => { typed = ''; }, 500);
        const start = typed.length > 1 ? n : n + 1;
        to = [...list.slice(start), ...list.slice(0, start)].find(x => nameOf(x).toLowerCase().startsWith(typed));
      }
    }
    e.preventDefault(); if (to) focus(to);
  });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="ft-folder" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h8.3A1.6 1.6 0 0 1 21 8.8v9.6a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 18.4z" fill="currentColor"/></symbol>
  <symbol id="ft-folder-open" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h7.3A1.6 1.6 0 0 1 20 8.8V10H7.4a1.6 1.6 0 0 0-1.5 1.1L3 18.6z" fill="currentColor" opacity=".55"/><path d="M6.4 11.3A1.6 1.6 0 0 1 7.9 10.2h13.2a1 1 0 0 1 .96 1.3l-2.2 7.3a1.6 1.6 0 0 1-1.5 1.2H4.3a1 1 0 0 1-.96-1.3z" fill="currentColor"/></symbol>
  <symbol id="ft-code" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M10 12.5l-2.2 2.3 2.2 2.3M14 12.5l2.2 2.3-2.2 2.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="ft-doc" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M8.4 13h7.2M8.4 16.6h5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
  <symbol id="ft-img" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M7.8 18.2l3.2-3.4 2 2 1.8-1.8 2 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9.6" cy="12" r="1.3" fill="currentColor"/></symbol>
  <symbol id="ft-chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<div class="grid">
<div><span class="lbl">Project explorer</span>
<div class="card ft-card rounded-4 overflow-hidden">
  <div class="card-header ft-head d-flex align-items-center justify-content-between bg-white"><p class="ft-title fw-bold text-uppercase mb-0" id="fta-title">Explorer</p><span class="ft-count text-body-secondary">18 files</span></div>
  <ul class="ft list-unstyled mb-0" role="tree" aria-label="Project files" data-tree data-status="fta-path">
    <li role="treeitem" aria-expanded="true" tabindex="-1">
      <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>trailhead-app</span></div>
      <ul role="group" class="list-unstyled mb-0" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>.github</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-expanded="false" tabindex="-1">
              <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>workflows</span></div>
              <ul role="group" class="list-unstyled mb-0" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>deploy.yml</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>public</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>favicon.svg</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>og-image.png</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>src</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>lib</span></div>
              <ul role="group" class="list-unstyled mb-0" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>api.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>format.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>stores.ts</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>routes</span></div>
              <ul role="group" class="list-unstyled mb-0" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+layout.svelte</span></div></li>
                <li role="treeitem" aria-selected="true" tabindex="0"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                <li role="treeitem" aria-expanded="false" tabindex="-1">
                  <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>trails</span></div>
                  <ul role="group" class="list-unstyled mb-0" style="--d:3">
                    <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:4"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                    <li role="treeitem" aria-expanded="false" tabindex="-1">
                      <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:4"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>[slug]</span></div>
                      <ul role="group" class="list-unstyled mb-0" style="--d:4">
                        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:5"><span class="ft-sp"></span><svg class="ft-ico c-orange" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.svelte</span></div></li>
                        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:5"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>+page.ts</span></div></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-purple" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>app.css</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>package.json</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-slate" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>README.md</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-amber" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="ft-name" data-name>svelte.config.js</span></div></li>
      </ul>
    </li>
  </ul>
  <p class="card-footer ft-foot text-body-secondary mb-0">Selected: <span class="ft-path font-monospace" id="fta-path" aria-live="polite">trailhead-app/src/routes/+page.svelte</span></p>
</div>
</div>
<div><span class="lbl">Shared drive with file sizes</span>
<div class="card ft-card rounded-4 overflow-hidden">
  <div class="card-header ft-head d-flex align-items-center justify-content-between bg-white"><p class="ft-title fw-bold text-uppercase mb-0" id="ftb-title">Team drive</p><span class="ft-count text-body-secondary">3.9 GB of 15 GB</span></div>
  <ul class="ft list-unstyled mb-0" role="tree" aria-label="Team drive" data-tree>
    <li role="treeitem" aria-expanded="true" tabindex="-1">
      <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Marketing</span><span class="ft-meta ms-auto ps-3 text-body-secondary">3 items</span></div>
      <ul role="group" class="list-unstyled mb-0" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Brand</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 items</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>logo-primary.svg</span><span class="ft-meta ms-auto ps-3 text-body-secondary">12 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>brand-guidelines.pdf</span><span class="ft-meta ms-auto ps-3 text-body-secondary">4.2 MB</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Campaigns</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 folders</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1">
              <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Spring launch</span><span class="ft-meta ms-auto ps-3 text-body-secondary">3 items</span></div>
              <ul role="group" class="list-unstyled mb-0" style="--d:2">
                <li role="treeitem" aria-selected="true" tabindex="0"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>brief.docx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">86 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>hero-banner.png</span><span class="ft-meta ms-auto ps-3 text-body-secondary">1.8 MB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>budget.xlsx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">42 KB</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="false" tabindex="-1">
              <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Black Friday</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 items</span></div>
              <ul role="group" class="list-unstyled mb-0" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="ft-name" data-name>offer-grid.png</span><span class="ft-meta ms-auto ps-3 text-body-secondary">960 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:3"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>email-copy.docx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">38 KB</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-blue" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>press-release-march.docx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">64 KB</span></div></li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1">
      <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Finance</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 items</span></div>
      <ul role="group" class="list-unstyled mb-0" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>q1-report.xlsx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">220 KB</span></div></li>
        <li role="treeitem" aria-expanded="false" tabindex="-1">
          <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>Invoices</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 items</span></div>
          <ul role="group" class="list-unstyled mb-0" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>inv-2041.pdf</span><span class="ft-meta ms-auto ps-3 text-body-secondary">118 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:2"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>inv-2042.pdf</span><span class="ft-meta ms-auto ps-3 text-body-secondary">121 KB</span></div></li>
          </ul>
        </li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1">
      <div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:0"><svg class="ft-chev" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="ft-ico ft-closed c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="ft-ico ft-open c-folder" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="ft-name" data-name>People</span><span class="ft-meta ms-auto ps-3 text-body-secondary">2 items</span></div>
      <ul role="group" class="list-unstyled mb-0" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-red" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>onboarding-checklist.pdf</span><span class="ft-meta ms-auto ps-3 text-body-secondary">310 KB</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1"><div class="ft-row d-flex align-items-center gap-2 rounded-2" data-row style="--d:1"><span class="ft-sp"></span><svg class="ft-ico c-green" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="ft-name" data-name>holiday-calendar.xlsx</span><span class="ft-meta ms-auto ps-3 text-body-secondary">28 KB</span></div></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</div>

CSS

/* File explorer tree (WAI-ARIA tree pattern). The row is indented with --d, the nesting depth,
   so hover and selection span the full width. Folders swap a closed and an open icon. */
.ft{--ft-text:#1f2937;--ft-muted:#5f6b7c;--ft-hover:#f1f4f9;--ft-sel:#e6efff;--ft-sel-text:#1e40af;--ft-focus:#2563eb;--ft-indent:16px}
.ft [role="treeitem"]{outline:none}
.ft [aria-expanded="false"]>[role="group"]{display:none}
.ft-row{height:30px;padding:0 10px 0 calc(var(--d,0) * var(--ft-indent) + 8px);cursor:pointer;user-select:none;white-space:nowrap}
.ft-row:hover{background:var(--ft-hover)}
.ft [aria-selected="true"]>.ft-row{background:var(--ft-sel);color:var(--ft-sel-text);font-weight:600}
.ft [role="treeitem"]:focus-visible>.ft-row{outline:2px solid var(--ft-focus);outline-offset:-2px}
.ft-chev{width:14px;height:14px;flex:none;color:var(--ft-muted);transition:transform .15s ease}
.ft [aria-expanded="true"]>.ft-row .ft-chev{transform:rotate(90deg)}
.ft-ico{width:18px;height:18px;flex:none}
.ft .ft-open,.ft [aria-expanded="true"]>.ft-row .ft-closed{display:none}
.ft [aria-expanded="true"]>.ft-row .ft-open{display:block}
.ft-sp{width:14px;flex:none}
.ft-name{overflow:hidden;text-overflow:ellipsis}
.ft-meta{font-size:.78rem;font-weight:400;font-variant-numeric:tabular-nums}
.c-folder{color:#d48a06}.c-blue{color:#2563eb}.c-orange{color:#ea580c}.c-purple{color:#7c3aed}.c-amber{color:#b45309}.c-green{color:#15803d}.c-red{color:#dc2626}.c-slate{color:#5f6b7c}
@media (prefers-reduced-motion:reduce){.ft-chev{transition:none}}
.ft{padding:6px;font-size:.875rem;color:var(--ft-text)}
.ft .ft-row{gap:6px}
.ft-card{--bs-card-border-color:#e2e7ee;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}
.ft-head{--bs-card-cap-padding-y:12px;--bs-card-cap-padding-x:16px;border-color:#e9edf3}
.ft-title{font-size:.72rem;letter-spacing:.08em;color:#334155}
.ft-count{font-size:.78rem}
.ft-foot{--bs-card-cap-padding-y:10px;--bs-card-cap-padding-x:16px;--bs-card-cap-bg:#f8fafc;border-color:#e9edf3;font-size:.78rem}
.ft-path{color:var(--ft-text)}

JavaScript

/* WAI-ARIA tree view: one tab stop (roving tabindex), Up/Down move, Right opens or goes to the first child,
   Left closes or goes to the parent, Home/End, type-ahead, Enter/Space open a folder or select a file. */
document.querySelectorAll('[role="tree"][data-tree]').forEach(tree => {
  const all = () => [...tree.querySelectorAll('[role="treeitem"]')];
  const shown = () => all().filter(i => !i.parentElement.closest('[role="treeitem"][aria-expanded="false"]'));
  const isFolder = i => i.hasAttribute('aria-expanded');
  const parentOf = i => i.parentElement.closest('[role="treeitem"]');
  const nameOf = i => i.querySelector(':scope > [data-row] [data-name]').textContent.trim();
  const out = document.getElementById(tree.dataset.status || '');
  let typed = '', timer;
  const focus = i => { all().forEach(n => { n.tabIndex = -1; }); i.tabIndex = 0; i.focus(); };
  const toggle = (i, open = i.getAttribute('aria-expanded') !== 'true') => i.setAttribute('aria-expanded', String(open));
  const select = i => {
    all().forEach(n => { if (!isFolder(n)) n.setAttribute('aria-selected', 'false'); });
    i.setAttribute('aria-selected', 'true');
    if (out) { const p = []; for (let n = i; n; n = parentOf(n)) p.unshift(nameOf(n)); out.textContent = p.join('/'); }
  };
  tree.addEventListener('click', e => {
    const row = e.target.closest('[data-row]'); if (!row) return;
    const i = row.parentElement; focus(i); isFolder(i) ? toggle(i) : select(i);
  });
  tree.addEventListener('keydown', e => {
    const i = e.target.closest('[role="treeitem"]'); if (!i || e.altKey || e.ctrlKey || e.metaKey) return;
    const list = shown(), n = list.indexOf(i), open = i.getAttribute('aria-expanded') === 'true'; let to = null;
    switch (e.key) {
      case 'ArrowDown': to = list[n + 1]; break;
      case 'ArrowUp': to = list[n - 1]; break;
      case 'Home': to = list[0]; break;
      case 'End': to = list[list.length - 1]; break;
      case 'ArrowRight': if (isFolder(i)) open ? to = i.querySelector('[role="treeitem"]') : toggle(i, true); break;
      case 'ArrowLeft': if (isFolder(i) && open) toggle(i, false); else to = parentOf(i); break;
      case 'Enter': case ' ': isFolder(i) ? toggle(i) : select(i); break;
      case '*': [...i.parentElement.children].filter(isFolder).forEach(s => toggle(s, true)); break;
      default: {
        if (e.key.length !== 1 || !/\S/.test(e.key)) return;
        typed += e.key.toLowerCase(); clearTimeout(timer); timer = setTimeout(() => { typed = ''; }, 500);
        const start = typed.length > 1 ? n : n + 1;
        to = [...list.slice(start), ...list.slice(0, start)].find(x => nameOf(x).toLowerCase().startsWith(typed));
      }
    }
    e.preventDefault(); if (to) focus(to);
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML

<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="ft-folder" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h8.3A1.6 1.6 0 0 1 21 8.8v9.6a1.6 1.6 0 0 1-1.6 1.6H4.6A1.6 1.6 0 0 1 3 18.4z" fill="currentColor"/></symbol>
  <symbol id="ft-folder-open" viewBox="0 0 24 24"><path d="M3 6.6A1.6 1.6 0 0 1 4.6 5h4.5l2 2.2h7.3A1.6 1.6 0 0 1 20 8.8V10H7.4a1.6 1.6 0 0 0-1.5 1.1L3 18.6z" fill="currentColor" opacity=".55"/><path d="M6.4 11.3A1.6 1.6 0 0 1 7.9 10.2h13.2a1 1 0 0 1 .96 1.3l-2.2 7.3a1.6 1.6 0 0 1-1.5 1.2H4.3a1 1 0 0 1-.96-1.3z" fill="currentColor"/></symbol>
  <symbol id="ft-code" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M10 12.5l-2.2 2.3 2.2 2.3M14 12.5l2.2 2.3-2.2 2.3" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></symbol>
  <symbol id="ft-doc" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M8.4 13h7.2M8.4 16.6h5" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></symbol>
  <symbol id="ft-img" viewBox="0 0 24 24"><path d="M6.2 2.8h7.6l5 5v12.1a1.3 1.3 0 0 1-1.3 1.3H6.2a1.3 1.3 0 0 1-1.3-1.3V4.1a1.3 1.3 0 0 1 1.3-1.3z" fill="none" stroke="currentColor" stroke-width="1.6"/><path d="M13.6 3v5h5M7.8 18.2l3.2-3.4 2 2 1.8-1.8 2 2.2" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/><circle cx="9.6" cy="12" r="1.3" fill="currentColor"/></symbol>
  <symbol id="ft-chev" viewBox="0 0 24 24"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></symbol>
</svg>
<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">Project explorer</span>
<div class="overflow-hidden rounded-[14px] border border-[#e2e7ee] bg-white shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)]">
  <div class="flex items-center justify-between border-b border-[#e9edf3] px-4 py-3"><p class="m-0 text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase" id="fta-title">Explorer</p><span class="text-[.78rem] text-[#5f6b7c]">18 files</span></div>
  <ul class="m-0 list-none p-1.5 text-[.875rem] text-[#1f2937]" role="tree" aria-label="Project files" data-tree data-status="fta-path">
    <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
      <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:0"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>trailhead-app</span></div>
      <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>.github</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
              <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>workflows</span></div>
              <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#b45309]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>deploy.yml</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>public</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="overflow-hidden text-ellipsis" data-name>favicon.svg</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="overflow-hidden text-ellipsis" data-name>og-image.png</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>src</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
              <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>lib</span></div>
              <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>api.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>format.ts</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>stores.ts</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
              <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>routes</span></div>
              <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#ea580c]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>+layout.svelte</span></div></li>
                <li role="treeitem" aria-selected="true" tabindex="0" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#ea580c]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>+page.svelte</span></div></li>
                <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
                  <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>trails</span></div>
                  <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:3">
                    <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:4"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#ea580c]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>+page.svelte</span></div></li>
                    <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
                      <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:4"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>[slug]</span></div>
                      <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:4">
                        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:5"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#ea580c]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>+page.svelte</span></div></li>
                        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:5"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>+page.ts</span></div></li>
                      </ul>
                    </li>
                  </ul>
                </li>
              </ul>
            </li>
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#7c3aed]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>app.css</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#b45309]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>package.json</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#5f6b7c]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>README.md</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#b45309]" aria-hidden="true" focusable="false"><use href="#ft-code"/></svg><span class="overflow-hidden text-ellipsis" data-name>svelte.config.js</span></div></li>
      </ul>
    </li>
  </ul>
  <p class="border-t border-[#e9edf3] bg-[#f8fafc] px-4 py-2.5 text-[.78rem] text-[#5f6b7c]">Selected: <span class="font-mono text-[#1f2937]" id="fta-path" aria-live="polite">trailhead-app/src/routes/+page.svelte</span></p>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Shared drive with file sizes</span>
<div class="overflow-hidden rounded-[14px] border border-[#e2e7ee] bg-white shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)]">
  <div class="flex items-center justify-between border-b border-[#e9edf3] px-4 py-3"><p class="m-0 text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase" id="ftb-title">Team drive</p><span class="text-[.78rem] text-[#5f6b7c]">3.9 GB of 15 GB</span></div>
  <ul class="m-0 list-none p-1.5 text-[.875rem] text-[#1f2937]" role="tree" aria-label="Team drive" data-tree>
    <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
      <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:0"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Marketing</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">3 items</span></div>
      <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:0">
        <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Brand</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 items</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="overflow-hidden text-ellipsis" data-name>logo-primary.svg</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">12 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#dc2626]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>brand-guidelines.pdf</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">4.2 MB</span></div></li>
          </ul>
        </li>
        <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Campaigns</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 folders</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-expanded="true" tabindex="-1" class="outline-none">
              <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Spring launch</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">3 items</span></div>
              <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:2">
                <li role="treeitem" aria-selected="true" tabindex="0" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>brief.docx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">86 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="overflow-hidden text-ellipsis" data-name>hero-banner.png</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">1.8 MB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>budget.xlsx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">42 KB</span></div></li>
              </ul>
            </li>
            <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
              <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Black Friday</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 items</span></div>
              <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:2">
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-img"/></svg><span class="overflow-hidden text-ellipsis" data-name>offer-grid.png</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">960 KB</span></div></li>
                <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:3"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>email-copy.docx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">38 KB</span></div></li>
              </ul>
            </li>
          </ul>
        </li>
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#2563eb]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>press-release-march.docx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">64 KB</span></div></li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
      <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:0"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Finance</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 items</span></div>
      <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>q1-report.xlsx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">220 KB</span></div></li>
        <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
          <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>Invoices</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 items</span></div>
          <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:1">
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#dc2626]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>inv-2041.pdf</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">118 KB</span></div></li>
            <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:2"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#dc2626]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>inv-2042.pdf</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">121 KB</span></div></li>
          </ul>
        </li>
      </ul>
    </li>
    <li role="treeitem" aria-expanded="false" tabindex="-1" class="outline-none">
      <div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:0"><svg class="size-3.5 flex-none text-[#5f6b7c] transition-transform duration-150 motion-reduce:transition-none [[aria-expanded=true]>div>&]:rotate-90" aria-hidden="true" focusable="false"><use href="#ft-chev"/></svg><svg class="size-[18px] flex-none [[aria-expanded=true]>div>&]:hidden text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder"/></svg><svg class="size-[18px] flex-none hidden [[aria-expanded=true]>div>&]:block text-[#d48a06]" aria-hidden="true" focusable="false"><use href="#ft-folder-open"/></svg><span class="overflow-hidden text-ellipsis" data-name>People</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">2 items</span></div>
      <ul role="group" class="[[aria-expanded=false]>&]:hidden" style="--d:0">
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#dc2626]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>onboarding-checklist.pdf</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">310 KB</span></div></li>
        <li role="treeitem" aria-selected="false" tabindex="-1" class="outline-none"><div class="flex h-[30px] cursor-pointer items-center gap-1.5 rounded-[7px] pr-2.5 pl-[calc(var(--d)*16px+8px)] whitespace-nowrap select-none hover:bg-[#f1f4f9] [[aria-selected=true]>&]:bg-[#e6efff] [[aria-selected=true]>&]:font-semibold [[aria-selected=true]>&]:text-[#1e40af] [:focus-visible>&]:outline-2 [:focus-visible>&]:-outline-offset-2 [:focus-visible>&]:outline-[#2563eb]" data-row style="--d:1"><span class="w-3.5 flex-none"></span><svg class="size-[18px] flex-none text-[#15803d]" aria-hidden="true" focusable="false"><use href="#ft-doc"/></svg><span class="overflow-hidden text-ellipsis" data-name>holiday-calendar.xlsx</span><span class="ml-auto pl-3 text-[.78rem] font-normal text-[#5f6b7c] tabular-nums">28 KB</span></div></li>
      </ul>
    </li>
  </ul>
</div>
</div>
</div>

JavaScript

/* WAI-ARIA tree view: one tab stop (roving tabindex), Up/Down move, Right opens or goes to the first child,
   Left closes or goes to the parent, Home/End, type-ahead, Enter/Space open a folder or select a file. */
document.querySelectorAll('[role="tree"][data-tree]').forEach(tree => {
  const all = () => [...tree.querySelectorAll('[role="treeitem"]')];
  const shown = () => all().filter(i => !i.parentElement.closest('[role="treeitem"][aria-expanded="false"]'));
  const isFolder = i => i.hasAttribute('aria-expanded');
  const parentOf = i => i.parentElement.closest('[role="treeitem"]');
  const nameOf = i => i.querySelector(':scope > [data-row] [data-name]').textContent.trim();
  const out = document.getElementById(tree.dataset.status || '');
  let typed = '', timer;
  const focus = i => { all().forEach(n => { n.tabIndex = -1; }); i.tabIndex = 0; i.focus(); };
  const toggle = (i, open = i.getAttribute('aria-expanded') !== 'true') => i.setAttribute('aria-expanded', String(open));
  const select = i => {
    all().forEach(n => { if (!isFolder(n)) n.setAttribute('aria-selected', 'false'); });
    i.setAttribute('aria-selected', 'true');
    if (out) { const p = []; for (let n = i; n; n = parentOf(n)) p.unshift(nameOf(n)); out.textContent = p.join('/'); }
  };
  tree.addEventListener('click', e => {
    const row = e.target.closest('[data-row]'); if (!row) return;
    const i = row.parentElement; focus(i); isFolder(i) ? toggle(i) : select(i);
  });
  tree.addEventListener('keydown', e => {
    const i = e.target.closest('[role="treeitem"]'); if (!i || e.altKey || e.ctrlKey || e.metaKey) return;
    const list = shown(), n = list.indexOf(i), open = i.getAttribute('aria-expanded') === 'true'; let to = null;
    switch (e.key) {
      case 'ArrowDown': to = list[n + 1]; break;
      case 'ArrowUp': to = list[n - 1]; break;
      case 'Home': to = list[0]; break;
      case 'End': to = list[list.length - 1]; break;
      case 'ArrowRight': if (isFolder(i)) open ? to = i.querySelector('[role="treeitem"]') : toggle(i, true); break;
      case 'ArrowLeft': if (isFolder(i) && open) toggle(i, false); else to = parentOf(i); break;
      case 'Enter': case ' ': isFolder(i) ? toggle(i) : select(i); break;
      case '*': [...i.parentElement.children].filter(isFolder).forEach(s => toggle(s, true)); break;
      default: {
        if (e.key.length !== 1 || !/\S/.test(e.key)) return;
        typed += e.key.toLowerCase(); clearTimeout(timer); timer = setTimeout(() => { typed = ''; }, 500);
        const start = typed.length > 1 ? n : n + 1;
        to = [...list.slice(start), ...list.slice(0, start)].find(x => nameOf(x).toLowerCase().startsWith(typed));
      }
    }
    e.preventDefault(); if (to) focus(to);
  });
});

About this set

Two file explorers that follow the WAI-ARIA tree view pattern. Project explorer shows a SvelteKit repository with folder icons that swap between closed and open, coloured file-type icons and a footer that shows the path of the selected file. Shared drive with file sizes is a team drive with item counts on folders and sizes on files. The markup is a list with role tree, list items with role treeitem and nested lists with role group; folders carry aria-expanded and files carry aria-selected. A short vanilla JavaScript block adds the keyboard model: one tab stop per tree with a roving tabindex, Up and Down to move, Right to open a folder or step into it, Left to close it or step out to the parent, Home and End, type-ahead on the first letters of a name, Enter or Space to open a folder or select a file, and asterisk to open every sibling folder. Rows are indented with a depth custom property, so hover and selection colours span the full width as in a desktop file manager. Icons are inline SVG symbols referenced with use.

What’s included

WAI-ARIA tree with role tree, treeitem and group
Roving tabindex, arrow keys, Home and End, type-ahead, Enter and Space
Folder icons that change when a folder opens, coloured file-type icons
Selected path written to a polite live region
Full-width selection rows indented by a --d depth variable
Inline SVG sprite, no icon font or library

Accessibility

Each tree has an aria-label and exposes level, position and expanded state through the tree roles, and the selected file is marked with aria-selected. Only one item per tree is in the tab order and the arrow keys move between visible items. The focused row shows a 2px blue outline, and the chevron rotation stops under prefers-reduced-motion.

Customise it

Set --ft-sel, --ft-sel-text, --ft-hover, --ft-focus and --ft-indent on .ft, and change the .c-* classes for icon colours. In Tailwind edit the bg-, text- and outline- colours in the row's arbitrary state variants such as [[aria-selected=true]>&]:bg-[#e6efff].

CSS code

Bootstrap 5 code

Tailwind 4 code

About this set

What’s included

Accessibility

Customise it

More from Tree Views