How To create treeview menu using bootstrap 4 step by step

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

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'});