Searchable Navigation Tree For Bootstrap 5 – bs5-nav-tree

A Bootstrap 5 extension that converts nested HTML lists into a searchable, collapsible/expandable tree.

How to use it:

1. Load the needed Bootstrap framework and Font Awesome iconic font in 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 bs5-nav-tree’s JavaScript and Stylesheet.

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

3. Convert an 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 functionality. Default: false.

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

5. Customize the icon classes, which means that 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. Determine whether to show empty groups. Default: false.

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

Changelog:

v0.3.1 (04/11/2022)

• Added iconPlace value to config to determine location of group/link icons. It can be ‘start’ or ‘end’.
• Link and group icons have ahref attribute.

v0.3 (12/22/2021)

• Refactor

The post Searchable Navigation Tree For Bootstrap 5 – bs5-nav-tree appeared first on CSS Script.