About this snippet

A file and folder tree that expands and collapses, styled to look like an editor sidebar.

Each folder is a details element with a summary as its label, so open and closed states are handled by the browser itself. That means no JavaScript, and keyboard users get the toggle behavior without extra work.

Nesting is plain unordered lists with left padding per level, so adding depth is just more nesting. The connecting lines are borders on the list items rather than background images, so they scale with the font size.

Size
1.9 KB
Uses
HTML, CSS
Loads
Nothing external
Views
804

Collections

Related snippets

<div class="file-tree">
  <ul>
    <li>
      <details open>
        <summary>&#128193; Project Root</summary>
        <ul>
          <li>
            <details>
              <summary>&#128193; src</summary>
              <ul>
                <li>&#128196; index.html</li>
                <li>&#128196; style.css</li>
                <li>&#128196; script.js</li>
              </ul>
            </details>
          </li>
          <li>
            <details>
              <summary>&#128193; assets</summary>
              <ul>
                <li>&#128444; logo.png</li>
                <li>&#128444; banner.jpg</li>
              </ul>
            </details>
          </li>
          <li>&#128196; README.md</li>
        </ul>
      </details>
    </li>
  </ul>
</div>
.file-tree {
  font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background: #1e293b;
  color: #e2e8f0;
  padding: 20px;
  border-radius: 12px;
  max-width: 300px;
}
ul {
  list-style: none;
  padding-left: 20px;
}
.file-tree > ul {
  padding-left: 0;
  margin: 0;
}
li {
  margin: 5px 0;
}
summary {
  cursor: pointer;
  list-style: none;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
summary::-webkit-details-marker {
  display: none;
}
summary:hover {
  background: #334155;
}
summary::before {
  content: "\25B6";
  font-size: 0.6rem;
  margin-right: 5px;
  transition: transform 0.2s;
  color: #94a3b8;
}
details[open] > summary::before {
  transform: rotate(90deg);
}
.file-tree li:not(:has(details)) {
  padding-left: 24px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #94a3b8;
  padding-top: 4px;
  padding-bottom: 4px;
}
.file-tree li:not(:has(details)):hover {
  color: #fff;
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}

      

          


    

    
  

  















  
Esc

  
  
↑↓ moveEnter select




  
Start from a template

  

    

    
Open an .html file, or HTML, CSS, JS, Markdown, Less or TypeScript files. You can also drop them here. Styles and scripts go into their panes.

  




  
Share

  




  
Source

  




  
Keyboard shortcuts

  




  

    
Save