### Treeview

Treeview is a visual portrayal of hierarchical data that starts with the root item and progresses through its children and their descendants. Aside from the root, every item has a parent and can have children. To create this Treeview, we used Bootstrap’s “Collapse” feature.

##### Basic Example

Use `data-show="true"` attribute with the collapse element to expand the tree at first.

- public

  - assets

    - image

      - falcon.png

      - generic.png

      - shield.svg

    - video3

      - beach.mp4

      - background.mp4

    - js2

      - theme.js

      - theme.min.js

  - dashboard

    - default.html

    - analytics.html

    - crm.html

  - index.html

- Files

  - build.zip

  - live-1.3.4.zip

  - app.exe

  - export.csv

  - default.pdf

  - Yellow_Coldplay.wav

- package.json

- package-lock.json

- README.md

    <ul class="mb-0 treeview" id="treeviewExample">
      <li class="treeview-list-item">
        <a data-bs-toggle="collapse" href="#treeviewExample-1-1" role="button" aria-expanded="false">
          <p class="treeview-text">
            public
          </p>
        </a>
        <ul class="collapse treeview-list" id="treeviewExample-1-1" data-show="false">
          <li class="treeview-list-item">
            <a data-bs-toggle="collapse" href="#treeviewExample-2-1" role="button" aria-expanded="false">
              <p class="treeview-text">
                assets
              </p>
            </a>
            <ul class="collapse treeview-list" id="treeviewExample-2-1" data-show="false">
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewExample-3-1" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    image
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewExample-3-1" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          falcon.png
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          generic.png
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-sun text-warning"></span>
                          shield.svg
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewExample-3-2" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    video<span class="badge rounded-pill badge-subtle-primary ms-2">3</span>
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewExample-3-2" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          beach.mp4
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          background.mp4
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewExample-3-3" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    js<span class="badge rounded-pill badge-subtle-primary ms-2">2</span>
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewExample-3-3" data-show="false">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.js
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.min.js
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <a data-bs-toggle="collapse" href="#treeviewExample-2-3" role="button" aria-expanded="false">
              <p class="treeview-text">
                dashboard
              </p>
            </a>
            <ul class="collapse treeview-list" id="treeviewExample-2-3" data-show="false">
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      default.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      analytics.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      crm.html
                    </p>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fab fa-html5 text-danger"></span>
                  index.html
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <a data-bs-toggle="collapse" href="#treeviewExample-1-2" role="button" aria-expanded="false">
          <p class="treeview-text">
            Files
          </p>
        </a>
        <ul class="collapse treeview-list" id="treeviewExample-1-2" data-show="true">
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  build.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  live-1.3.4.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  app.exe
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  export.csv
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-pdf text-danger"></span>
                  default.pdf
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-music text-info"></span>
                  Yellow_Coldplay.wav
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package-lock.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fas fa-exclamation-circle text-primary"></span>
              README.md
            </p>
          </a>
        </div>
      </li>
    </ul>

##### Stripe Example

Use `treeview-stripe` class and `data-options='{"striped":true}'` to make a striped treeview.

- public

  - assets

    - image

      - falcon.png

      - generic.png

      - shield.svg

    - video3

      - beach.mp4

      - background.mp4

    - js2

      - theme.js

      - theme.min.js

  - dashboard

    - default.html

    - analytics.html

    - crm.html

  - index.html

- Files

  - build.zip

  - live-1.3.4.zip

  - app.exe

  - export.csv

  - default.pdf

  - Yellow_Coldplay.wav

- package.json

- package-lock.json

- README.md

    <ul class="mb-0 treeview treeview-stripe" id="treeviewStriped" data-options='{"striped":true}'>
      <li class="treeview-list-item">
        <a data-bs-toggle="collapse" href="#treeviewStriped-1-1" role="button" aria-expanded="false">
          <p class="treeview-text">
            public
          </p>
        </a>
        <ul class="collapse treeview-list" id="treeviewStriped-1-1" data-show="false">
          <li class="treeview-list-item">
            <a data-bs-toggle="collapse" href="#treeviewStriped-2-1" role="button" aria-expanded="false">
              <p class="treeview-text">
                assets
              </p>
            </a>
            <ul class="collapse treeview-list" id="treeviewStriped-2-1" data-show="false">
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewStriped-3-1" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    image
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewStriped-3-1" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          falcon.png
                        </p>
                      </a>
                      <div class="dot bg-info"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          generic.png
                        </p>
                      </a>
                      <div class="dot bg-primary"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-sun text-warning"></span>
                          shield.svg
                        </p>
                      </a>
                      <div class="dot bg-primary"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewStriped-3-2" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    video<span class="badge rounded-pill badge-subtle-primary ms-2">3</span>
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewStriped-3-2" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          beach.mp4
                        </p>
                      </a>
                      <div class="dot bg-warning"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          background.mp4
                        </p>
                      </a>
                      <div class="dot bg-warning"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <a data-bs-toggle="collapse" href="#treeviewStriped-3-3" role="button" aria-expanded="false">
                  <p class="treeview-text">
                    js<span class="badge rounded-pill badge-subtle-primary ms-2">2</span>
                  </p>
                </a>
                <ul class="collapse treeview-list" id="treeviewStriped-3-3" data-show="false">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.js
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.min.js
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <a data-bs-toggle="collapse" href="#treeviewStriped-2-3" role="button" aria-expanded="false">
              <p class="treeview-text">
                dashboard
              </p>
            </a>
            <ul class="collapse treeview-list" id="treeviewStriped-2-3" data-show="false">
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      default.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      analytics.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      crm.html
                    </p>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fab fa-html5 text-danger"></span>
                  index.html
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <a data-bs-toggle="collapse" href="#treeviewStriped-1-2" role="button" aria-expanded="false">
          <p class="treeview-text">
            Files
          </p>
        </a>
        <ul class="collapse treeview-list" id="treeviewStriped-1-2" data-show="true">
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  build.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  live-1.3.4.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  app.exe
                </p>
              </a>
              <div class="dot bg-warning"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  export.csv
                </p>
              </a>
              <div class="dot bg-primary"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-pdf text-danger"></span>
                  default.pdf
                </p>
              </a>
              <div class="dot bg-primary"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-music text-info"></span>
                  Yellow_Coldplay.wav
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package-lock.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fas fa-exclamation-circle text-primary"></span>
              README.md
            </p>
          </a>
        </div>
      </li>
    </ul>

##### Select Example

Use `treeview-slect` class and `data-options='{"select":true}'` to make a selectable treeview.

- public

  - assets

    - image

      - falcon.png

      - generic.png

      - shield.svg

    - video3

      - beach.mp4

      - background.mp4

    - js2

      - theme.js

      - theme.min.js

  - dashboard

    - default.html

    - analytics.html

    - crm.html

  - index.html

- Files

  - build.zip

  - live-1.3.4.zip

  - app.exe

  - export.csv

  - default.pdf

  - Yellow_Coldplay.wav

- package.json

- package-lock.json

- README.md

    <ul class="mb-0 treeview treeview-slect" id="treeviewSelect" data-options='{"select":true}'>
      <li class="treeview-list-item">
        <div class="toggle-container">
          <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-1-1" />
          <a data-bs-toggle="collapse" href="#treeviewSelect-1-1" role="button" aria-expanded="false">
            <p class="treeview-text">
              public
            </p>
          </a>
        </div>
        <ul class="collapse treeview-list" id="treeviewSelect-1-1" data-show="false">
          <li class="treeview-list-item">
            <div class="toggle-container">
              <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-2-1" />
              <a data-bs-toggle="collapse" href="#treeviewSelect-2-1" role="button" aria-expanded="false">
                <p class="treeview-text">
                  assets
                </p>
              </a>
            </div>
            <ul class="collapse treeview-list" id="treeviewSelect-2-1" data-show="false">
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-1" />
                  <a data-bs-toggle="collapse" href="#treeviewSelect-3-1" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      image
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelect-3-1" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          falcon.png
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          generic.png
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-sun text-warning"></span>
                          shield.svg
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-2" />
                  <a data-bs-toggle="collapse" href="#treeviewSelect-3-2" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      video<span class="badge rounded-pill badge-subtle-primary ms-2">3</span>
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelect-3-2" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          beach.mp4
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          background.mp4
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-3-3" />
                  <a data-bs-toggle="collapse" href="#treeviewSelect-3-3" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      js<span class="badge rounded-pill badge-subtle-primary ms-2">2</span>
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelect-3-3" data-show="false">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.js
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.min.js
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="toggle-container">
              <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-2-3" />
              <a data-bs-toggle="collapse" href="#treeviewSelect-2-3" role="button" aria-expanded="false">
                <p class="treeview-text">
                  dashboard
                </p>
              </a>
            </div>
            <ul class="collapse treeview-list" id="treeviewSelect-2-3" data-show="false">
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      default.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      analytics.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      crm.html
                    </p>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fab fa-html5 text-danger"></span>
                  index.html
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="toggle-container">
          <input class="form-check-input" type="checkbox" data-target="#treeviewSelect-1-2" />
          <a data-bs-toggle="collapse" href="#treeviewSelect-1-2" role="button" aria-expanded="false">
            <p class="treeview-text">
              Files
            </p>
          </a>
        </div>
        <ul class="collapse treeview-list" id="treeviewSelect-1-2" data-show="true">
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  build.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  live-1.3.4.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  app.exe
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  export.csv
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-pdf text-danger"></span>
                  default.pdf
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-music text-info"></span>
                  Yellow_Coldplay.wav
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package-lock.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fas fa-exclamation-circle text-primary"></span>
              README.md
            </p>
          </a>
        </div>
      </li>
    </ul>

##### Stripe with select Example

Use `treeview-stripe` and `treeview-slect` both class and `data-options='{"select":true,"striped":true}'` to make a selectable and striped treeview.

- public

  - assets

    - image

      - falcon.png

      - generic.png

      - shield.svg

    - video3

      - beach.mp4

      - background.mp4

    - js2

      - theme.js

      - theme.min.js

  - dashboard

    - default.html

    - analytics.html

    - crm.html

  - index.html

- Files

  - build.zip

  - live-1.3.4.zip

  - app.exe

  - export.csv

  - default.pdf

  - Yellow_Coldplay.wav

- package.json

- package-lock.json

- README.md

    <ul class="mb-0 treeview treeview-stripe treeview-slect" id="treeviewSelectStriped" data-options='{"striped":true,"select":true}'>
      <li class="treeview-list-item">
        <div class="toggle-container">
          <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-1-1" />
          <a data-bs-toggle="collapse" href="#treeviewSelectStriped-1-1" role="button" aria-expanded="false">
            <p class="treeview-text">
              public
            </p>
          </a>
        </div>
        <ul class="collapse treeview-list" id="treeviewSelectStriped-1-1" data-show="false">
          <li class="treeview-list-item">
            <div class="toggle-container">
              <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-2-1" />
              <a data-bs-toggle="collapse" href="#treeviewSelectStriped-2-1" role="button" aria-expanded="false">
                <p class="treeview-text">
                  assets
                </p>
              </a>
            </div>
            <ul class="collapse treeview-list" id="treeviewSelectStriped-2-1" data-show="false">
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-1" />
                  <a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-1" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      image
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelectStriped-3-1" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          falcon.png
                        </p>
                      </a>
                      <div class="dot bg-info"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-image text-success"></span>
                          generic.png
                        </p>
                      </a>
                      <div class="dot bg-primary"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-sun text-warning"></span>
                          shield.svg
                        </p>
                      </a>
                      <div class="dot bg-primary"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-2" />
                  <a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-2" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      video<span class="badge rounded-pill badge-subtle-primary ms-2">3</span>
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelectStriped-3-2" data-show="true">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          beach.mp4
                        </p>
                      </a>
                      <div class="dot bg-warning"></div>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fas fa-play text-danger"></span>
                          background.mp4
                        </p>
                      </a>
                      <div class="dot bg-warning"></div>
                    </div>
                  </li>
                </ul>
              </li>
              <li class="treeview-list-item">
                <div class="toggle-container">
                  <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-3-3" />
                  <a data-bs-toggle="collapse" href="#treeviewSelectStriped-3-3" role="button" aria-expanded="false">
                    <p class="treeview-text">
                      js<span class="badge rounded-pill badge-subtle-primary ms-2">2</span>
                    </p>
                  </a>
                </div>
                <ul class="collapse treeview-list" id="treeviewSelectStriped-3-3" data-show="false">
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.js
                        </p>
                      </a>
                    </div>
                  </li>
                  <li class="treeview-list-item">
                    <div class="treeview-item">
                      <input class="form-check-input" type="checkbox" />
                      <a class="flex-1" href="#!">
                        <p class="treeview-text">
                          <span class="me-2 fab fa-js text-success"></span>
                          theme.min.js
                        </p>
                      </a>
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="toggle-container">
              <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-2-3" />
              <a data-bs-toggle="collapse" href="#treeviewSelectStriped-2-3" role="button" aria-expanded="false">
                <p class="treeview-text">
                  dashboard
                </p>
              </a>
            </div>
            <ul class="collapse treeview-list" id="treeviewSelectStriped-2-3" data-show="false">
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      default.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      analytics.html
                    </p>
                  </a>
                </div>
              </li>
              <li class="treeview-list-item">
                <div class="treeview-item">
                  <input class="form-check-input" type="checkbox" />
                  <a class="flex-1" href="#!">
                    <p class="treeview-text">
                      <span class="me-2 fab fa-html5 text-danger"></span>
                      crm.html
                    </p>
                  </a>
                </div>
              </li>
            </ul>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fab fa-html5 text-danger"></span>
                  index.html
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="toggle-container">
          <input class="form-check-input" type="checkbox" data-target="#treeviewSelectStriped-1-2" />
          <a data-bs-toggle="collapse" href="#treeviewSelectStriped-1-2" role="button" aria-expanded="false">
            <p class="treeview-text">
              Files
            </p>
          </a>
        </div>
        <ul class="collapse treeview-list" id="treeviewSelectStriped-1-2" data-show="true">
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  build.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-archive text-warning"></span>
                  live-1.3.4.zip
                </p>
              </a>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  app.exe
                </p>
              </a>
              <div class="dot bg-warning"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file text-primary"></span>
                  export.csv
                </p>
              </a>
              <div class="dot bg-primary"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-file-pdf text-danger"></span>
                  default.pdf
                </p>
              </a>
              <div class="dot bg-primary"></div>
            </div>
          </li>
          <li class="treeview-list-item">
            <div class="treeview-item">
              <input class="form-check-input" type="checkbox" />
              <a class="flex-1" href="#!">
                <p class="treeview-text">
                  <span class="me-2 fas fa-music text-info"></span>
                  Yellow_Coldplay.wav
                </p>
              </a>
            </div>
          </li>
        </ul>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fab fa-node-js text-success"></span>
              package-lock.json
            </p>
          </a>
        </div>
      </li>
      <li class="treeview-list-item">
        <div class="treeview-item">
          <input class="form-check-input" type="checkbox" />
          <a class="flex-1" href="#!">
            <p class="treeview-text">
              <span class="me-2 fas fa-exclamation-circle text-primary"></span>
              README.md
            </p>
          </a>
        </div>
      </li>
    </ul>

##### Structure

Falcon uses Bootstrap Collapse to create interactive trees. All you need to add some specific treeview classes in Bootstrap Collapse component to make a treeview. First, add a unique id to the treeview element. Normally Bootstrap collapse needs a unique id for every collapse element. We recommend using treeview element id as the prefix of every collapse element along with a unique id. See Collapse documentation on Bootstrap

    <ul class="treeview" id="treeviewExample">
      <li class="treeview-list-item">
        <a data-bs-toggle="collapse" href="#treeviewExample-1-1" role="button" aria-expanded="false">
          <p class="treeview-text">public</p>
        </a>
        <ul class="collapse treeview-list" id="treeviewExample-1-1">
          <li class="treeview-list-item">
            <a data-bs-toggle="collapse" href="#treeviewExample-2-1" role="button" aria-expanded="false">
              <p class="treeview-text">assets</p>
            </a>

            <!-- Nestesd Childrens-->
          </li>
        </ul>
      </li>
    </ul>

#### Register

Please create your free Falcon account

Name
Email address
Password
Confirm Password
I accept the terms and privacy policy

or register with
google
facebook

##### Settings

Set your own customized style

##### Color Scheme

Choose the perfect color mode for your app.

##### RTL Mode

Switch your language direction

RTL Documentation

##### Fluid Layout

Toggle container layout system

Fluid Documentation

##### Navigation Position

Select a suitable navigation system for your web application

##### Vertical Navbar Style

Switch between styles for your vertical navbar

See Documentation

##### Like What You See?

Get Falcon now and create beautiful dashboards with hundreds of widgets.

Purchase
customize