Treeview

Basic Treeview

                                                    
                                                        <!-- jstree css -->
                                                        <link href="assets/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                               
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/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" : "ri-home-4-line 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" : "ri-vip-diamond-line 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/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                                
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/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" : "ri-article-line 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" : "ri-user-line 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/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                               
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/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/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                               
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/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/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                               
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/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/vendor/jstree/themes/default/style.min.css" rel="stylesheet" type="text/css">
                                                    
                                              
                                                    
                                                        <!-- jstree js -->
                                                        <script src="assets/vendor/jstree/jstree.min.js"></script>
                                                        <script src="assets/js/pages/demo.jstree.js"></script>
                                                    
                                                
                                                    
                                                        <!-- jstree json -->
                                                        [{
                                                            "id": "node_1",
                                                            "icon": "ri-folder-line icon-lg text-success",
                                                            "text": "Node - 1",
                                                            "children": false
                                                        }, {
                                                            "id": "node_2",
                                                            "icon": "ri-folder-line icon-lg text-success",
                                                            "text": "Node - 2",
                                                            "children": false
                                                        }, {
                                                            "id": "node_3",
                                                            "icon": "ri-folder-line icon-lg text-success",
                                                            "text": "Node - 3",
                                                            "children": false
                                                        }]
                                                    
                                                
                                                    
                                                        <div id="jstree-6"></div>
                                                    
                                                
Theme Settings
Choose Layout
Vertical
Horizontal
Color Scheme
Light
Dark
Layout Mode
Fluid
Boxed
Detached
Topbar Color
Light
Dark
Brand
Menu Color
Light
Dark
Brand
Layout Position