Components
Tree View

Components

Tailwind CSS Tree View

Browse free customizable Tailwind CSS Tree View. Choose from basic, nested, bordered, arrowed, and other styles to collapse and expand UI elements.

Requires JS

Note that this component requires the use of our Accordion and Tree View plugins, else you can skip this message if you are already using Preline UI as a package.

Learn more

Basic usage

Basic Tree View example to expand and collapse the treeview node.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates

Close currently opened

Closes the currently open element at the group level by removing the data-hs-accordion-always-open.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates

Customize

Customize the Tree View component with any icons and styles.

Text

Frame

Alignment

Left

Right

Top

Bottom

Font

Cursor

Tools

Files

Multiple selection New

You may select multiple folders/files by holding shift, ctrl | cmd key.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates

Draggable New

Requires Additional Installation

Also note that some of the demos below have the ability to Drag n' Drop items, this uses the external library Sortable.js, make sure it's also connected on the page.

Learn more

Certain JavaScript Helpers in Preline UI make use of Lodash plugin. Don't forget to install it, if you haven't done so already: npm i lodash

You may select multiple folders/files by holding shift, ctrl | cmd key.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates

draggable.forEach((el) => {
                              const options = {
                                group: 'nested',
                                animation: 150,
                                fallbackOnBody: true,
                                swapThreshold: 0.65,
                                ghostClass: 'dragged',
                                onEnd: (evt) => {
                                  const { item } = evt;

if (item.classList.contains('hs-accordion')) {
                                    let existingInstance = HSAccordion.getInstance(item, true);
                                    let updatedInstance;

existingInstance.element.update();
                                    updatedInstance = HSAccordion.getInstance(item, true);
                                    window.$hsAccordionCollection.map((el) => {
                                      if (
                                        el.element.el !== existingInstance.element.el &&
                                        el.element.group === existingInstance.element.group &&
                                        el.element.el.classList.contains('active') &&
                                        existingInstance.element.el.classList.contains('active')
                                      ) el.element.hide();

return el;
                                    });
                                  }

if (!!item.hasAttribute('data-hs-tree-view-item')) {
                                    const treeViewItem = HSTreeView.getInstance(item.closest('[data-hs-tree-view]'), true);
                                    
                                    treeViewItem.element.update();
                                  }
                                },
                              };
                              const data = el.getAttribute('data-hs-nested-draggable');
                              const dataOptions = data ? JSON.parse(data) : {};
                              const sortable = new Sortable(el, _.merge(options, dataOptions));
                            });
                          })();
                        });
                      </script>

Draggable and auto collapse one level group New

This demo uses Sortable.js to drag n' drop items. You may select multiple folders/files by holding shift, ctrl | cmd key.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates

if (item.classList.contains('hs-accordion')) {
                                    let existingInstance = HSAccordion.getInstance(item, true);
                                    let updatedInstance;

existingInstance.element.update();
                                    updatedInstance = HSAccordion.getInstance(item, true);
                                    window.$hsAccordionCollection.map((el) => {
                                      if (
                                        el.element.el !== existingInstance.element.el &&
                                        el.element.group === existingInstance.element.group &&
                                        el.element.el.closest('.hs-accordion-group') &&
                                        el.element.el.classList.contains('active') &&
                                        existingInstance.element.el.classList.contains('active')
                                      ) el.element.hide();

return el;
                                    });
                                  }

if (!!item.hasAttribute('data-hs-tree-view-item')) {
                                    const treeViewItem = HSTreeView.getInstance(item.closest('[data-hs-tree-view]'), true);

treeViewItem.element.update();
                                  }
                                },
                              };
                              const data = el.getAttribute('data-hs-nested-draggable');
                              const dataOptions = data ? JSON.parse(data) : {};
                              const sortable = new Sortable(el, _.merge(options, dataOptions));
                            });
                          })();
                        });
                      </script>

Checkbox New

This demo uses Sortable.js to drag n' drop items. You can select folders/files by checking the checkboxes.

if (item.classList.contains('hs-accordion')) {
                                    let existingInstance = HSAccordion.getInstance(item, true);
                                    let updatedInstance;

existingInstance.element.update();
                                    updatedInstance = HSAccordion.getInstance(item, true);
                                    window.$hsAccordionCollection.map((el) => {
                                      if (
                                        el.element.el !== existingInstance.element.el &&
                                        el.element.group === existingInstance.element.group &&
                                        el.element.el.closest('.hs-accordion-group') &&
                                        el.element.el.classList.contains('active') &&
                                        existingInstance.element.el.classList.contains('active')
                                      ) el.element.hide();

return el;
                                    });
                                  }

if (!!item.hasAttribute('data-hs-tree-view-item')) {
                                    const treeViewItem = HSTreeView.getInstance(item.closest('[data-hs-tree-view]'), true);

Destroy and Reinitialize New

Provides destroy method that helps to destroy a tree view.

assets

css

main

main.css

docs.css

README.txt

tailwind

.gitignore

img

scripts

templates