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-soft-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-soft-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-soft-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-soft-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-soft-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-soft-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-soft-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-soft-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>
