In this bootstrap tutorial, I am going to tell you How To create treeview menu using bootstrap 4.I will implement constant data based tree view menu using bootstrap 4.
We will create bootstrap treeview example using bootstrap 4 and font-awesome.I am taking static data but you can convert into dynamic tree menu list using any programming language like PHP, nodejs,Python etc.This tutorial have following dependencies –
Bootstrap 4
jQuery
Font-awesome
step 1:Let’s create index.html file
step 2:Import Dependency Libs
write all the code into the file.
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
step 3:Add HTML element Tree View
We will add HTML element that will display treeview bootstrap menu.
<div class="row">
<div class="col-md-4">
<ul id="tree1">
</p>
<li>
<a href="#">TECH</a>
<ul>
<li>Company Maintenance</li>
<li>
Employees
<ul>
<li>
Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>
XRP
<ul>
<li>Company Maintenance</li>
<li>
Employees
<ul>
<li>
Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
<div class="col-md-4">
<ul id="tree2">
<li>
<a href="#">TECH</a>
<ul>
<li>Company Maintenance</li>
<li>
Employees
<ul>
<li>
Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
<li>
XRP
<ul>
<li>Company Maintenance</li>
<li>
Employees
<ul>
<li>
Reports
<ul>
<li>Report1</li>
<li>Report2</li>
<li>Report3</li>
</ul>
</li>
<li>Employee Maint.</li>
</ul>
</li>
<li>Human Resources</li>
</ul>
</li>
</ul>
</div>
</div>
Output
- TECH
- Company Maintenance
- Employees
- Reports
- Report1
- Report2
- Report3
- Employee Maint.
- Reports
- Human Resources
- XRP
- Company Maintenance
- Employees
- Reports
- Report1
- Report2
- Report3
- Employee Maint.
- Reports
- Human Resources
- TECH
- Company Maintenance
- Employees
- Reports
- Report1
- Report2
- Report3
- Employee Maint.
- Reports
- Human Resources
- XRP
- Company Maintenance
- Employees
- Reports
- Report1
- Report2
- Report3
- Employee Maint.
- Reports
- Human Resources
Step 4:Hide and show treeview menu
$.fn.extend({
treed: function (o) {
var openedClass = 'fa-minus-circle';
var closedClass = 'fa-plus-circle';
if (typeof o != 'undefined'){
if (typeof o.openedClass != 'undefined'){
openedClass = o.openedClass;
}
if (typeof o.closedClass != 'undefined'){
closedClass = o.closedClass;
}
};
//initialize each of the top levels
var tree = $(this);
tree.addClass("tree");
tree.find('li').has("ul").each(function () {
var branch = $(this); //li with children ul
branch.prepend("");
branch.addClass('branch');
branch.on('click', function (e) {
if (this == e.target) {
var icon = $(this).children('i:first');
icon.toggleClass(openedClass + " " + closedClass);
$(this).children().children().toggle();
}
})
branch.children().children().toggle();
});
//fire event from the dynamically added icon
tree.find('.branch .indicator').each(function(){
$(this).on('click', function () {
$(this).closest('li').click();
});
});
//fire event to open branch if the li contains an anchor instead of text
tree.find('.branch>a').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
//fire event to open branch if the li contains a button instead of text
tree.find('.branch>button').each(function () {
$(this).on('click', function (e) {
$(this).closest('li').click();
e.preventDefault();
});
});
}
});
//Initialization of treeviews
$('#tree1').treed();
$('#tree2').treed({openedClass:'fa-folder-open', closedClass:'fa-folder'});