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.
Must Read: Vue Treeview Structure Implementation In Javascript Dynamically
Bootstrap 5 Treeview Dynamic Details
Post Name | Bootstrap Dynamic Treeview |
Author Name | nhmvienna |
Category | Bootstrap, tree |
Official Page | Click Here |
Official Website | github.com |
Bootstrap v5 | getbootstrap.com |
jQuery v3.4.1 (>= 1.9.0) | jquery.com |
Publish Date | August 20, 2021 |
Last Update | September 19, 2023 |
Download | Link Below |
License | MIT |
How to make use of it:
1. Add the following resources for bootstrap-treeview.
<!-- Required Stylesheets --> <link href="bootstrap.css" rel="stylesheet"> <!-- Required Javascript --> <script src="jquery.js"></script> <script src="bstreeview.js"></script>
2. The component will bind to any existing DOM element.
<div id="tree"></div>
3. The basic usage looks like this.
function getTree() { // Some logic to retrieve, or generate tree structure return data; } $('#tree').bstreeview({ data: getTree() });
4. In order to define the desired hierarchical structure of the tree, it is necessary to provide a nested array of JavaScript objects.
var tree = [ { text: "Node 1", icon: "fa fa-folder", expanded: true, 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: "https://google.com" }, { 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. This property text is required to display the contract.
{ text: "Node 1" }
Must Read:
Vuetify Drag And Drop Draggable Tree View Component | v-treeview
jQuery Dynamic Hierarchy Treeview Plugin | jsTree
Node Properties
text
String
Mandatory
The text value is displayed for a given tree node.
icon
String
Optional
The icon is displayed on a given node.
href
String
Optional
A custom href
attribute value for a given node.
class
String
Optional
A class name or space-separated list of class names to add to a given node.
id
String
Optional
ID attribute value to assign to a given node.
expanded
Boolean
Optional
Set to true to expand this node’s children initially
Must Read: A Tiny and Fast jQuery Treeview Plugin | hummingbird-treeview
Options
data
String
Mandatory
Json or string array of nodes.
expandIcon
String
Optional
Expand icon class name, default is fa fa-angle-down fa-fw
.
collapseIcon
String
Optional
Collapse icon class name, default is fa fa-angle-right fa-fw
.
indent
number with decimals
Optional
Custom indent between node levels (rem), default is 1.25
.
parentsMarginLeft
String
Optional
margin-left value of parent nodes, default is 1.25rem
.
openNodeLinkOnNewTab
Boolean
Optional
See Also –
Responsive Draggable & Resizable Dashboard (Grid) for Vue
HTML Select Object Extension with Framework | jQuery treeSelection
Bootstrap 5 To Create Vertical And Nested Collapsible Tree Menu Plugin
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.