1. Components
  2. 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.

Theme:

Close currently opened

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

Theme:

Customize

Customize the Tree View component with any icons and styles.

Theme:

Multiple selection

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

Theme:

Draggable

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.

Theme:

Draggable and auto collapse one level group

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

Theme:

Checkbox

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

Theme:

Destroy and Reinitialize

Provides destroy method that helps to destroy a tree view.

Theme: