Collection of free HTML and CSS tree view examples from Codepen and other resources.

Demo image: TreeView Details/Summary

Author

  • johnbarnitz

Links

Made with

  • HTML / CSS

About a code

TreeView Details/Summary

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: HTML5 Details & Summary File Tree

Author

  • Isaione

Links

Made with

  • HTML (Pug) / CSS (SCSS)

About a code

HTML5 Details & Summary File Tree

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: bootstrap.css

Demo image: CSS3 Tree View Sticky

Author

  • Dmitry Karmalita

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS3 Tree View Sticky

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Tree View from Unordered List

Author

  • Ross Angus

Links

Made with

  • HTML (Pug) / CSS

About a code

Tree View from Unordered List

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: partial

Dependencies: -

Demo image: Pure CSS Tree

Author

  • Rafael González

Links

Made with

  • HTML / CSS (SCSS)

About a code

Pure CSS Tree

A folders tree view, without JS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Demo image: Tree Diagram

Author

  • Guillaume Chabot

Links

Made with

  • HTML / CSS (SCSS)

About a code

Tree Diagram

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -