<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"> <!---- Must Add above thing or you can use alternative icons or CSS Entities----> <div class="tree "> <ul> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#Web" aria-expanded="true" aria-controls="Web"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Web</a></span> <div id="Web" class="collapse show"> <ul> <li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#page1" aria-expanded="false" aria-controls="page1"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Page 1</a></span> <ul><div id="page1" class="collapse"> <li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 3</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 4</a></span></li></div> </ul> </li> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#Page2" aria-expanded="false" aria-controls="Page2"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Page 2</a></span> <ul><div id="Page2" class="collapse"> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#folder1" aria-expanded="false" aria-controls="folder1"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Folder 1</a></span> <ul><div id="folder1" class="collapse"> <li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 3</a></span> <a href="#!">& More Link</a></li></div> </ul> </li> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#folder2" aria-expanded="false" aria-controls="folder2"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Folder 2</a></span> <ul><div id="folder2" class="collapse"> <li><span><i class="far fa-file"></i><a href="#!"> Link 1</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li> <li><span><i class="far fa-file"></i><a href="#!"> Link 3</a></span> <a href="#!">& More Link</a></li></div> </ul> </li> <li><span><a style="color:#000; text-decoration:none;" data-toggle="collapse" href="#folder3" aria-expanded="false" aria-controls="folder3"><i class="collapsed"><i class="fas fa-folder"></i></i> <i class="expanded"><i class="far fa-folder-open"></i></i> Folder 3</a></span> <ul><div id="folder3" class="collapse"> <li><span><i class="far fa-file"></i><a href="#!"> Link</a></span> <a href="#!">& More Link</a></li></div> </ul> </li> <li><span><i class="far fa-file"></i><a href="#!"> Link</a></span></li> </div> </ul> </li> <li><span><i class="far fa-file"></i><a href="#!"> Link 2</a></span></li> </ul> </div> </li> </ul> </div>

.tree li { list-style-type:none; margin:0; padding:10px 5px 0 5px; position:relative } .tree li::before, .tree li::after { content:''; left:-20px; position:absolute; right:auto } .tree li::before { border-left:2px solid #000; bottom:50px; height:100%; top:0; width:1px } .tree li::after { border-top:2px solid #000; height:20px; top:25px; width:25px } .tree li span { -moz-border-radius:5px; -webkit-border-radius:5px; border:2px solid #000; border-radius:3px; display:inline-block; padding:3px 8px; text-decoration:none; cursor:pointer; } .tree>ul>li::before, .tree>ul>li::after { border:0 } .tree li:last-child::before { height:27px } .tree li span:hover { background: hotpink; border:2px solid #94a0b4; } [aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed { display: none; }

/* Make it simple */ /* Pure css */ /* You can also use this for sitemap */ /* check this out=> https://bootsnipp.com/Winson222 */