#### Basic

- Main

  - CSS

    - Modules

      - style.module.css

    - style.css

  - JS

    - script.js

  - image

    - profile.jpeg

    - background.png

    - arrow.svg

  - index.html

    <ul class="treeview" id="treeviewBasicMainChild">
        <li class="tv-item tv-folder">
            <div class="tv-header" id="mainChildHeadingOne">
                <div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#mainChildOne" aria-expanded="true" aria-controls="mainChildOne">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <polyline points="9 6 15 12 9 18"></polyline>
                        </svg>
                    </div>
                    <p class="title">CSS</p>
                </div>
            </div>
            <div id="mainChildOne" class="treeview-collapse collapse show" aria-labelledby="mainChildHeadingOne" data-bs-parent="#treeviewBasicMainChild">

                <ul class="treeview" id="treeviewBasicCSSChild">
                    <li class="tv-item tv-folder">
                        <div class="tv-header" id="cssChildHeadingOne">
                            <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#cssChildOne" aria-expanded="false" aria-controls="cssChildOne">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <polyline points="9 6 15 12 9 18"></polyline>
                                    </svg>
                                </div>
                                <p class="title">Modules</p>
                            </div>
                        </div>
                        <div id="cssChildOne" class="treeview-collapse collapse" aria-labelledby="cssChildHeadingOne" data-bs-parent="#treeviewBasicCSSChild">
                            <ul class="treeview" id="treeviewBasicModulesChild">
                                <li class="tv-item"><p>style.module.css</p></li>
                            </ul>
                        </div>
                    </li>

                    <li class="tv-item"><p>style.css</p></li>
                </ul>

            </div>
        </li>

        <li class="tv-item tv-folder">
            <div class="tv-header" id="mainChildHeadingTwo">
                <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#mainChildTwo" aria-expanded="false" aria-controls="mainChildTwo">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <polyline points="9 6 15 12 9 18"></polyline>
                        </svg>
                    </div>
                    <p class="title">JS</p>
                </div>
            </div>
            <div id="mainChildTwo" class="treeview-collapse collapse" aria-labelledby="mainChildHeadingTwo" data-bs-parent="#treeviewBasicMainChild">

                <ul class="treeview" id="treeviewBasicJSChild">
                    <li class="tv-item"><p>script.js</p></li>
                </ul>

            </div>
        </li>

        <li class="tv-item tv-folder">
            <div class="tv-header" id="mainChildHeadingThree">
                <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#mainChildThree" aria-expanded="false" aria-controls="mainChildThree">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-chevron-right" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <polyline points="9 6 15 12 9 18"></polyline>
                        </svg>
                    </div>
                    <p class="title">image</p>
                </div>
            </div>
            <div id="mainChildThree" class="treeview-collapse collapse" aria-labelledby="mainChildHeadingThree" data-bs-parent="#treeviewBasicMainChild">
                <ul class="treeview" id="treeviewBasicImgChild">
                    <li class="tv-item"><p>profile.jpeg</p></li>
                    <li class="tv-item"><p>background.png</p></li>
                    <li class="tv-item"><p>arrow.svg</p></li>
                </ul>
            </div>
        </li>

        <li class="tv-item"><p>index.html</p></li>
    </ul>

#### Folder Structure

- Main

  - CSS

    - Modules

      - style.module.css

    - style.css

  - JS

    - script.js

  - image

    - profile.jpeg

    - background.png

    - arrow.svg

  - index.html

    <ul class="treeview folder-structure" id="treeviewFolderStructureEx">
        <li class="tv-item">
            <div class="tv-header" id="main">
                <div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#folderMainCollapse" aria-expanded="true" aria-controls="folderMainCollapse">
                    <div class="icon">
                        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                            <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                            <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
                        </svg>
                    </div>
                    <p class="title">Main</p>
                </div>
            </div>
            <div id="folderMainCollapse" class="treeview-collapse collapse show" aria-labelledby="main" data-bs-parent="#treeviewFolderStructureEx">

                <ul class="treeview" id="treeviewFolderStructureMainChild">
                    <li class="tv-item">
                        <div class="tv-header" id="folderMainChildHeadingOne">
                            <div class="tv-collapsible" data-bs-toggle="collapse" data-bs-target="#folderMainChildOne" aria-expanded="true" aria-controls="folderMainChildOne">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
                                    </svg>
                                </div>
                                <p class="title">CSS</p>
                            </div>
                        </div>
                        <div id="folderMainChildOne" class="treeview-collapse collapse show" aria-labelledby="folderMainChildHeadingOne" data-bs-parent="#treeviewFolderStructureMainChild">

                            <ul class="treeview" id="treeviewFolderCSSChild">
                                <li class="tv-item">
                                    <div class="tv-header" id="folderCSSChildHeadingOne">
                                        <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderCSSChildOne" aria-expanded="false" aria-controls="folderCSSChildOne">
                                            <div class="icon">
                                                <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                    <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
                                                </svg>
                                            </div>
                                            <p class="title">Modules</p>
                                        </div>
                                    </div>
                                    <div id="folderCSSChildOne" class="treeview-collapse collapse" aria-labelledby="folderCSSChildHeadingOne" data-bs-parent="#treeviewFolderCSSChild">
                                        <ul class="treeview" id="treeviewFolderModulesChild">
                                            <li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                                <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                                <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                                <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                                </svg> </span><p>style.module.css</p></li>
                                        </ul>
                                    </div>
                                </li>

                                <li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                    </svg> </span> <p>style.css</p></li>
                            </ul>

                        </div>
                    </li>

                    <li class="tv-item">
                        <div class="tv-header" id="folderMainChildHeadingTwo">
                            <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderMainChildTwo" aria-expanded="false" aria-controls="folderMainChildTwo">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
                                    </svg>
                                </div>
                                <p class="title">JS</p>
                            </div>
                        </div>
                        <div id="folderMainChildTwo" class="treeview-collapse collapse" aria-labelledby="folderMainChildHeadingTwo" data-bs-parent="#treeviewFolderStructureMainChild">

                            <ul class="treeview" id="treeviewBasicJSChild">
                                <li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                    </svg> </span><p>script.js</p></li>
                            </ul>

                        </div>
                    </li>

                    <li class="tv-item">
                        <div class="tv-header" id="folderMainChildHeadingThree">
                            <div class="tv-collapsible collapsed" data-bs-toggle="collapse" data-bs-target="#folderMainChildThree" aria-expanded="false" aria-controls="folderMainChildThree">
                                <div class="icon">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-folder" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                        <path d="M5 4h4l3 3h7a2 2 0 0 1 2 2v8a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-11a2 2 0 0 1 2 -2"></path>
                                    </svg>
                                </div>
                                <p class="title">image</p>
                            </div>
                        </div>
                        <div id="folderMainChildThree" class="treeview-collapse collapse" aria-labelledby="folderMainChildHeadingThree" data-bs-parent="#treeviewFolderStructureMainChild">
                            <ul class="treeview" id="treeviewBasicImgChild">
                                <li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                    </svg> </span><p>profile.jpeg</p></li>
                                <li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                    </svg> </span><p>background.png</p></li>
                                <li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                                    <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                                    <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                                    <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                                    </svg> </span><p>arrow.svg</p></li>
                            </ul>
                        </div>
                    </li>

                    <li><li class="tv-item"> <span class="icon"> <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-file" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                        <path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
                        <path d="M14 3v4a1 1 0 0 0 1 1h4"></path>
                        <path d="M17 21h-10a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2h7l5 5v11a2 2 0 0 1 -2 2z"></path>
                        </svg> </span><p>index.html</p></li>
                </ul>

            </div>
        </li>

    </ul>