30+ CSS TreeView Examples

CSS TreeView – Are you looking for CSS TreeView Plugins, If yes then in this post I am going to share hand-picked CSS TreeView Examples with source code for you. Tree view is a tree-like representation of data. It is ideal for some web applications as it allows users to navigate to the information easily and quickly. CSS jQuery based tree view plugin simply enables you to show your data into a tree-like structure on your website. It’s a plugin that allows rendering various structures with nested elements and forming a tree view on the front-end. You can use these CSS TreeView in your next web based projects.

CSS TreeView

Following are the list of CSS TreeView.

CSS only collapsible TreeView DEMO

 CSS only collapsible TreeView

TreeView uses hidden checkboxes to collapse & expand a branch. – By Zaku

Custom Checkbox Treeview DEMO

 Custom Checkbox Treeview

– By fsbdev

Bootstrap 3 Left Multilevel Menu (Treeview) DEMO

 Bootstrap 3 Left Multilevel Menu (Treeview)

Bootstrap 3 Left Multilevel Menu (Treeview) – By yahyaerturan

A CSS Treeview Control DEMO

 A CSS Treeview Control

A very simple treeview control using minimal Javascript – By kurt_cagle

Vanilla JS TreeView Example DEMO

 Vanilla JS TreeView Example

Working example of the treeview control I wrote using vanilla JavaScript. – By justinchmura

ivh-treeview with material design DEMO

 ivh-treeview with material design

– By kasajian

Treeview / Древовидная структура DEMO

 Treeview / Древовидная структура

Treeview, bootstrap support – By axelaredz

UI CSS Treeview DEMO

 UI CSS Treeview

UI CSS Treeview component – By AndersonMamede

Angular Material – TreeView DEMO

 Angular Material - TreeView

– By dunmaksim

Trying Angular treeview DEMO

 Trying Angular treeview

– By lechat

YUI TreeView.Sortable example DEMO

 YUI TreeView.Sortable example

This is an example of how to use the TreeView.Sortable extension in the SmugMug TreeView YUI gallery module. – By rgrove

ng-treeview DEMO


– By greengerong

Angular treeview DEMO

 Angular treeview

– By robmazan

Folders with no JS! DEMO

 Folders with no JS!

Folders using checkboxes and junk. There can be default open folders, and even disabled folders! Such CSS. Very Style. wow – By tystrong

Selecting leaf on kendo treeview DEMO

 Selecting leaf on kendo treeview

– By msestak

Pure CSS – Accordion With Input Edit DEMO

 Pure CSS - Accordion With Input Edit

– By jorgebrunetto

Nested Folders DEMO

 Nested Folders

nested folders and fodler structure – By achudars

A Pen by yaoyi DEMO

 A Pen by yaoyi

– By yaoyi

Collapsible Lists jqeury DEMO

 Collapsible Lists jqeury

a jqeury implementation of this idea : http://code.stephenmorley.org/javascript/collapsible-lists/ – By iaian

TreeView DEMO


Based on prior work by http://www.bypeople.com/pure-css-tree-menu-framework-cssdeck/ – By myramoki

Bootstrap TreeView DEMO

 Bootstrap TreeView

– By atatanasov

Nested Folders, No JS DEMO

 Nested Folders, No JS

– By chriscoyier

Treeview DropDown DEMO

 Treeview DropDown

A dropdown tree view – By RameezAhmed349

BootStrap TreeView DEMO

 BootStrap TreeView

– By Ronty06

Angular Search Tree DEMO

 Angular Search Tree

– By kwilber

AngulaJS Sortable Tree DEMO

 AngulaJS Sortable Tree

– By Yizhu

Sidebar AdminLTE DEMO

 Sidebar AdminLTE

– By jasp402

Bootstrap Treeview w/ 5000 children DEMO

 Bootstrap Treeview w/ 5000 children

– By elmsoftware


 HTML & CSS Tree View

Treeview state management with very little to no JS. Uses Radio groups with :checked state, sibling selectors, css animations, transitions, and transforms – By augur

TreeView DEMO


A TreeView select tool with each level represented by a bubble. Hover over each bubble to select the targeted element. – By chrisvarao

Nested lists with drag & drop DEMO

 Nested lists with drag & drop

Treeview like lists with drag and drop functionality – By raduvultur

JQuery sidebar-menu.js DEMO

 JQuery sidebar-menu.js

– By ray0315

A Pen by man whoescape DEMO

 A Pen by man whoescape

– By cowardguy

A Pen by galaxija737 DEMO

 A Pen by galaxija737

– By galaxija737

get_children_selected DEMO


– By quangtuan

A Pen by Magnus Jonsson DEMO

 A Pen by Magnus Jonsson

– By magnusjonsson123

I Hope you liked Hand-picked list of CSS TreeView, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.