JSFiddle - React, Tailwind, and code Playground

by Pratik Galoria

HTML

<ul>
	<li>
  	<span>Parent</span>
    <ul>
    	<li>
        Item 1
        <ul>
          <li>Sub-item 1</li>
        </ul>
      </li>
      <li>Item 2</li>
  </li>
</ul>

CSS

ul {
  list-style: none;
}

li {
  border-left: 1px solid black;
}

JavaScript

/*

Designing uncommon elements with CSS 

Many times we come accross UI elements thot look easy but capable enough to give us a headache while we start implementing. Here, I would like to talk about some of them and explain the strategies I used to make them work. 

Part 1: Tree navigation with connectors

So you've been asked to create a tree-like navigation in your sidebar, something like this:

Looks simple right? First you will try to think about an HTML structure and mostly end-up with an idea of using <ul>-<li> to display repeating parent-child relationship, and start with a basic prototype:

<ul>
	<li>
  	<span>Parent</span>
    <ul>
    	<li>Item 1
      	<ul>
        	<li>sub-item 1</li>
        </ul>
      </li>
      <li>Item 2</li>
  </li>
</ul>

Hmm..straigh-forward. But after sometime, you will notice those lines, yes, those connecting lines that visually make this structure a Tree, and you go 'wait..what?! I didn't mention SVG in my resume?' Don't worry, even I didn't. So today, I will tell you how you can do that with and only-with CSS.

Idea is to draw those lines with borders. But to do that, we have to structure this tree differently.
*/