Pure CSS tree view with custom tree icons

In this tutorial we'll be creating a pure CSS solution to implement a tree view structure. This is a very common structure and typically requires javascript in order to fully complete. In this CSS only solution we'll have customizable tree icons, use pseudo elements for the 'tier' legs and arms along with several tricks along the way!

💖 SUBSCRIBE (Please) 💖

🔗 Links 🔗

⌚Timestamps⌚
00:00 Intro
00:01 Setting up the HTML
05:05 The magic of details & summary
12:30 Adding the styles for the arms and legs with pseudo elements
23:30 Setting up custom icons for the collapsed and open states
31:26 Reminding you to SUBSCRIBE ALREADY

📢 Social Media 📢

#css #html #treeview

[tri]

Thanks so much ! I needed an additional line in the css, summary {list-style: none;}, to make the disclosure triangle go away, but otherwise, worked like a charm. Very much appreciated.

[enkiimuto]

You're such a good teacher that I don't even need to do this on css but i watched it anyway.

PS: good music on the intro

[ayushkushwaha]

I had this same scenario come into my work today, your tutorial really helped, thanks Andrew!

[hulooloo]

The perfet tutorial I'v search for tree UI! Thanks Andrew.

[Levendo]

This video helped me a great deal. Thanks a lot, good sir.

[NedumEze]

Sorry Andy, did you forget to make the code available for download? I'll be helpful if you do

[shubhamambhore]

Thanks for all the helpful information 😍

[kajalmondal]

Please upload regularly sir. Miss your videos

[hccnjwo]

How well does this approach support screen-readers and accessibility?

[GerritforBazeja]

Thank you for the nice video, again and your calm way of explaining. Can you make it also suitable for mobile.

[abidrahim]

This. is. amazing. I would have gone the hard way with JavaScript, but this is so so much better. Thank you sir!

[wtdosama]

We need more full website with css grid (grid-template-areas)

[rayyanabdulwajid]

I have done this without css checkbox or javascript using only html details and summary

[DeepakNegiSunny]

Hello sir, is there any way we can make that recursive by note repeating the template (li), which repeats itself until last child 😊

[anonimus]

Source code? I cant get rid of the summery::marker

[brotinbiswas]

This is amazing and so simple. I like it....👍👍👍👍

But one thing :- Turn off the default triangle " details { display:none; }" didn't work for me.

I believe the following approaches will work.

ul summary::marker {
content: none;
}