"Multilevel Collapsible Menu"
Bootstrap 4.1.1 Snippet by nitesh575

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap 5 Collapsible Menu</title> <!-- Bootstrap CSS --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- Font Awesome --> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-lg-12"> <h2>Multilevel Collapsible Menu</h2> </div> </div> <ul class="list-unstyled"> <li class="nav-item"> <a class="nav-link collapsed" href="#" data-bs-toggle="collapse" data-bs-target="#collapseIndustries" aria-expanded="false" aria-controls="collapseIndustries"> Industries <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseIndustries" class="collapse"> <ul class="list-unstyled ps-3"> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseIGaming" aria-expanded="false" aria-controls="collapseIGaming"> iGaming <i class="fas fa-chevron-right ms-1"></i> </a> </a> <div id="collapseIGaming" class="collapse"> <ul class="list-unstyled ps-3"> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFantasySport" aria-expanded="false" aria-controls="collapseFantasySport"> Fantasy Sport <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseFantasySport" class="collapse"> <ul class="list-unstyled ps-3"> <li><a href="" class="nav-link collapsed">Fantasy Cricket Software</a></li> <li><a href="" class="nav-link collapsed">White Label Fantasy Cricket</a></li> </ul> </div> </li> <li><a href="" class="nav-link collapsed">Esports Tournament</a></li> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseBoardGames" aria-expanded="false" aria-controls="collapseBoardGames"> Board Games <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseBoardGames" class="collapse"> <ul class="list-unstyled ps-3"> <li><a href="" class="nav-link collapsed">Ludo Game</a></li> </ul> </div> </li> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseCasino" aria-expanded="false" aria-controls="collapseCasino"> Casino App <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseCasino" class="collapse"> <ul class="list-unstyled ps-3"> <li><a href="" class="nav-link collapsed">Poker Game</a></li> <li><a href="" class="nav-link collapsed">Rummy Game</a></li> </ul> </div> </li> <li><a href="" class="nav-link collapsed">Software</a></li> </ul> </div> </li> <li> <a href="#" class="nav-link collapsed" data-bs-toggle="collapse" data-bs-target="#collapseBlockchain" aria-expanded="false" aria-controls="collapseBlockchain"> Blockchain <i class="fas fa-chevron-right ms-1"></i> </a> <div id="collapseBlockchain" class="collapse"> <ul class="list-unstyled ps-3"> <li><a href="" class="nav-link collapsed">Cryptocurrency App</a></li> <li><a href="" class="nav-link collapsed">Cryptocurrency Wallet</a></li> </ul> </div> </li> <li><a href="" class="nav-link collapsed">Web Designing</a></li> <li><a href="" class="nav-link collapsed">Real Estate</a></li> </ul> </div> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Portfolio</a> </li> <li class="nav-item"> <a class="nav-link collapsed" href="">Careers</a></li> <li class="nav-item"> <a class="nav-link collapsed" href="">Blogs</a></li> <li class="nav-item"> <a class="nav-link collapsed" href="">Videos</a></li> <li class="nav-item"> <a class="nav-link collapsed" href="">Contact Us</a></li> </ul> <div class="row"> <div class="col-lg-12"> <p>More Tech Realted News & Update <a class="text-dark" href="https://thethoughtoftheday.com/">Click Here</a></p> </div> </div> </div> <!-- Bootstrap JS --> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" crossorigin="anonymous"></script> </body> </html>
.fas { transform: rotate(90deg); transition: transform 0.2s; } .collapsed .fas { transform: rotate(0deg); transition: transform 0.2s; }

Related: See More

Vue Black Dashboard
Bootstrap NavBar Menu Dropdowns http://fontenele.github.io/bootstrap-navbar-dropdowns/
Accordian Menu
Bootstrap V4 Side Toggle and Fixed Top Menu (Responsive)

Questions / Comments: