Treeview

Basic Treeview

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <div id="jstree-1">
                                                            <ul>
                                                                <li>
                                                                    Root node 1
                                                                    <ul>
                                                                        <li data-jstree='{ "selected" : true }'>
                                                                            <a href="javascript:;">
                                                                            Initially selected </a>
                                                                        </li>
                                                                        <li data-jstree='{ "icon" : "dripicons-home text-success " }'>
                                                                            custom icon URL
                                                                        </li>
                                                                        <li data-jstree='{ "opened" : true }'>
                                                                            initially open
                                                                            <ul>
                                                                                <li data-jstree='{ "disabled" : true }'>
                                                                                    Disabled Node
                                                                                </li>
                                                                                <li data-jstree='{ "type" : "file" }'>
                                                                                    Another node
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-jstree='{ "icon" : "dripicons-jewel text-danger" }'>
                                                                            Custom icon class (bootstrap)
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li data-jstree='{ "type" : "link" }'>
                                                                    <a href="http://www.coderthemes.com">
                                                                    Clickable link node </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    
                                                

Custom Icons & Clickable Nodes

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <div id="jstree-2"
                                                            <ul>
                                                                <li>
                                                                    Root node 1
                                                                    <ul>
                                                                        <li data-jstree='{ "selected" : true }'>
                                                                            <a href="javascript:;">
                                                                                Initially selected </a>
                                                                        </li>
                                                                        <li data-jstree='{ "icon" : "dripicons-hourglass text-success " }'>
                                                                            custom icon URL
                                                                        </li>
                                                                        <li data-jstree='{ "opened" : true }'>
                                                                            initially open
                                                                            <ul>
                                                                                <li data-jstree='{ "disabled" : true }'>
                                                                                    Disabled Node
                                                                                </li>
                                                                                <li data-jstree='{ "type" : "file" }'>
                                                                                    Another node
                                                                                </li>
                                                                            </ul>
                                                                        </li>
                                                                        <li data-jstree='{ "icon" : "dripicons-user text-danger" }'>
                                                                            Custom icon class (bootstrap)
                                                                        </li>
                                                                    </ul>
                                                                </li>
                                                                <li data-jstree='{ "type" : "link" }'>
                                                                    <a href="https://coderthemes.com/">
                                                                        Clickable link node </a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    
                                                

Checkable Tree

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <div id="jstree-3"></div>
                                                    
                                                

Contextual Menu

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <div id="jstree-4"></div>
                                                    
                                                

Drag & Drop

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <div id="jstree-5"></div>
                                                    
                                                

Ajax Data

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/css/vendor/jstree.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/js/vendor/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <!-- jstree json -->
                                                        [{
                                                            "id": "node_1",
                                                            "icon": "dripicons-folder icon-lg text-success",
                                                            "text": "Node - 1",
                                                            "children": false
                                                        }, {
                                                            "id": "node_2",
                                                            "icon": "dripicons-folder icon-lg text-success",
                                                            "text": "Node - 2",
                                                            "children": false
                                                        }, {
                                                            "id": "node_3",
                                                            "icon": "dripicons-folder icon-lg text-success",
                                                            "text": "Node - 3",
                                                            "children": false
                                                        }]
                                                    
                                                
                                                    
                                                        <div id="jstree-6"></div>
                                                    
                                                
Settings
Color Scheme

Width

Left Sidebar

Purchase Now