Collapsible menu of Bootstrap not working

Question

I am using latest Bootstrap version 5 and collapsible menu not working when I do a responsive check and click on Hamburger Manu Button it does not work. Kindly Help!

Menu Code:

<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Brand</a>
 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
    <li class="nav-item">
        <a class="nav-link" href="">Contact</a></li>
    <li class="nav-item">
        <a class="nav-link" href="">Pricing</a></li>
    <li class="nav-item">
        <a class="nav-link" href="">Download</a></li>
</ul>
</div>
</nav>

JS:

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>

score 0 · Answer 1 · answered Mar 21 '21 at 20:29

Make sure you have classes data-bs-toggle and data-bs-target instead of previously used data-toggle or data-target as Bootstrap 5 requires it. In addition, you can enable Bootstrap 5 with just two asset files. Single CSS and Single JS bundle are enough. I have placed the code with working example below so check that out. You can find more information about it on Bootstrap v.5 documentation

<html>

<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
</head>

<body>
<nav class="navbar bg-dark navbar-expand-lg navbar-dark">
<a class="navbar-brand" href="">Brand</a>
 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ms-auto">
    <li class="nav-item">
        <a class="nav-link" href="">Contact</a></li>
    <li class="nav-item">
        <a class="nav-link" href="">Pricing</a></li>
    <li class="nav-item">
        <a class="nav-link" href="">Download</a></li>
</ul>
</div>
</nav>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
</body>

</html>

Collapsible menu of Bootstrap not working

1 Answers1