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.

<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.map
                    </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.

<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.map
                    </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.

<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.map
                    </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.

<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.map
                    </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>

Thank you for creating with Falcon |
2023 © Themewagon

v3.16.0

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