DEV Community

Cover image for File Tree Structure using CSS
Ambuj sahu
Ambuj sahu

Posted on

File Tree Structure using CSS

File tree structure

It is very simple but amazing file structure design in Pure CSS that you can apply to an unordered list, just follow the below steps : -

  • create a simple html file
  • use nested HTML Unordered Lists
<ul>
  <li>root
    <ul>
      <li>folder one
      <ul>
         <li>file_one.txt</li>
         <li>file_two.txt</li>
      </ul>
      </li>
      <li>folder two
      <ul>
         <li>file_one.txt</li>
         <li>file_two.txt</li>
      </ul>
     </li>
    </ul>
  </li>
</ul>
Enter fullscreen mode Exit fullscreen mode
  • Add a span inside every li element
<li><span></span>file_one.txt</li>
Enter fullscreen mode Exit fullscreen mode
  • you can add some folder and files icon or svg in the li element to make the file tree structure look more real

    • folder icon

folder icon

    <li><span></span><i class="fa-regular fa-folder-open"></i>root<ul>...rest</li>
Enter fullscreen mode Exit fullscreen mode
  • Now finally add some css magic to complete the file tree structure.
    • create L shape line by adding following css to the empty span.
    border-bottom: 1px solid;
    border-left: 1px solid;
    height: 1.5rem;
    width: 2rem;
    display: inline-block;
    margin-bottom: 0.3rem;
    margin-left: 1rem;
Enter fullscreen mode Exit fullscreen mode
  • final output preview

final preview

  • you can find live example here
  • Also checkout the code pointer for the same code sample

Top comments (0)