#### Treeview

#### Basic Treeview

- Root node 1
  - Initially selected
  - custom icon URL
  - initially open
    - Disabled Node
    - Another node
  - Custom icon class (bootstrap)
- Clickable link node

                                                            <!-- 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

- Root node 1
  - Initially selected
  - custom icon URL
  - initially open
    - Disabled Node
    - Another node
  - Custom icon class (bootstrap)
- Clickable link node

                                                            <!-- 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

Customize the overall color scheme, sidebar menu, etc.

##### Color Scheme

Light Mode
Dark Mode

##### Width

Fluid
Boxed

##### Left Sidebar

Default
Light
Dark
Fixed
Condensed
Scrollable
Purchase Now