Press "Enter" to skip to content

Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with bootstrap 5, the attributes have been changed from data-target and data-toggle to data-bs-target and data-bs-toggle syntax.

bootstrap 5 treeview, bootstrap treeview bootstrap, dynamic tree view with checkboxes, bootstrap treeview add dynamically, bootstrap treeview json data example, bootstrap tree menu collapse example

How to make use of it:

1. Load each jQuery library and Bootstrap 5 framework within the doc.

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/bootstrap.bundle.min.js"></script>

2. Load the minified version of the bstreeview plugin.

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

3. Create an empty DIV container to carry the tree view.

<div id="tree">
</div>

4. Prepare your information in an array of JS objects as follows.

var treeData = [
    {
      text: "Node 1",
      icon: "fa fa-folder", // requires font awesome
      nodes: [
        {
          text: "Sub Node 1",
          icon: "fa fa-folder",
          nodes: [
            {
              id:    "sub-node-1",
              text:  "Sub Child Node 1",
              icon:  "fa fa-folder",
              class: "nav-level-3",
              href:  " "
            },
            {
              text: "Sub Child Node 2",
              icon: "fa fa-folder"
            }
          ]
        },
        {
          text: "Sub Node 2",
           icon: "fa fa-folder"
        }
      ]
    },
    {
      text: "Node 2",
      icon: "fa fa-folder"
    },
    {
      text: "Node 3",
      icon: "fa fa-folder"
    },
    {
      text: "Node 4",
      icon: "fa fa-folder"
    },
    {
      text: "Node 5",
      icon: "fa fa-folder"
    }
];

5. Generate a primary tree view from the info you provide.

$('#tree').bstreeview({ 
  data: treeData
});

6. Override the default expand/collapse icon classes.

$('#tree').bstreeview({ 
  expandIcon: 'fa fa-angle-down',
  collapseIcon: 'fa fa-angle-right'
});

7. Specify the indentation of child nodes.

$('#tree').bstreeview({ 
  indent: 2
});

8. Set the margin area on the left side of parent nodes.

$('#tree').bstreeview({ 
  parentsMarginLeft: '1.25rem'
});

9. Determine whether or not to open the link in a brand new tab.

$('#tree').bstreeview({ 
  openNodeLinkOnNewTab: false
});

Dynamic Collapsible Tree View For Bootstrap 5, Bootstrap 5 Tree View Plugin/Github, bootstrap treeview not working, dynamic tree structure using jquery


See Demo And Download

Official Website(nhmvienna): Click Here

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

Be First to Comment

    Leave a Reply

    Your email address will not be published.