Bootstrap 5 To Create Vertical And Nested Collapsible Tree Menu Plugin

accordion-tree-bootstrap

bs5 nav tree is a Bootstrap 5 extension that converts nested HTML lists into a searchable and collapsible/expandable tree.

accordion tree bootstrap, bootstrap collapsible tree menu, bootstrap treeview example code, tree dropdown bootstrap, sidebar menu group tree bootstrap 4, mlm tree design in html

How to make use of it:

1. Load the required Bootstrap framework and the iconic Font Awesome font into the document.

<!-- Bootstrap -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Font Awesome -->
<link rel="stylesheet" href="/path/to/cdn/font-awesome/all.min.css" />

2. Load the javascript and the bs5-nav-tree style sheet.

<link rel="stylesheet" href="static/css/tree.css" />
<script src="static/js/tree.js"></script>

3. Convert the HTML list into a tree.

<ul id="nav-tree">
  <li id="li0" class="nav-item extra">
    <a class="nav-link" href="">extra list</a>
  </li>
  <li id="li1">
    <a href="#">
      Link 1
    </a>
    <a href="" class="extra">extra link</a>
  </li>
  <li id="li2">
    <a>
      Collapse 1
    </a>
    <ul>
      <li id="li4">
        <a>
          Collapse 2
        </a>
        <ul>
          <li id="li6">
            <a href="#">
              Link 2
            </a>
          </li>
          <li id="li7">
            <a href="#">
              Link 3
            </a>
          </li>
          <li id="li8">
            <a>
              Collapse 3
            </a>
            <ul>
              <li id="li9">
                <a href="#">
                  Link 4
                </a>
              </li>
              <li id="li10">
                <a href="#">
                  Link 5
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="li5">
        <a href="#">
          Link 6
        </a>
      </li>
    </ul>
  </li>
  <li id="li20">
    <a>
      Collapse 10
    </a>
    <ul>
      <li id="li40">
        <a>
          Collapse 20
        </a>
        <ul>
          <li id="li60">
            <a href="#">
              Link 20
            </a>
          </li>
          <li id="li70">
            <a href="#">
              Link 30
            </a>
          </li>
          <li id="li80">
            <a>
              Collapse 30
            </a>
            <ul>
              <li id="li90">
                <a href="#">
                  Link 40
                </a>
              </li>
              <li id="li100">
                <a href="#">
                  Link 50
                </a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li id="li50">
        <a href="#">
          Link 60
        </a>
      </li>
    </ul>
  </li>
  <li id="li3">
    <a href="#">
      Link 7
    </a>
  </li>
</ul>
document.addEventListener('DOMContentLoaded', function () {
  window.nav = new NavTree("#nav-tree", {
    // options here
  });
});

4. Enable the live search function.

document.addEventListener('DOMContentLoaded', function () {
  window.nav = new NavTree("#nav-tree", {
    searchable: true,
    searchPlaceholderText: 'Search Here',
  });
});

5. Customize Icon Categories, which means you can use any 3rd party icon set instead of Font Awesome.

document.addEventListener('DOMContentLoaded', function () {
  window.nav = new NavTree("#nav-tree", {
    groupOpenIconClass: "fas",
    groupOpenIcon: "fa-chevron-down",
    groupCloseIconClass: "fas",
    groupCloseIcon: "fa-chevron-right",
    linkIconClass: "fas",
    linkIcon: "fa-link",
    iconWidth: "25px",
  });
});

6. Decide if you want to show empty groups.

document.addEventListener('DOMContentLoaded', function () {
  window.nav = new NavTree("#nav-tree", {
    showEmptyGroups: true,
  });
});

Searchable Navigation Tree For Bootstrap 5, bs5 nav tree Plugin/Github, bootstrap tree view codepen, html tree view template


See Demo And Download

Official Website(akalp): Click Here

This superior jQuery/javascript plugin is developed by akalp. For extra Advanced usage, please go to the official website.