Bootstrap Navbar Hamburger Menu Not Working-CodePudding

I'm making a website with Bootstrap and when I use the following code for the navbar and reduce the dimensions of the display, the hamburger menu will not expand down and show the menu options:

<nav >
    <a href="#" >Title</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
    </button>

    <div  id="menuItems">
        <ul >
            <li > <a target="_parent"  href="index.html"> Home <span >(current)</span></a> </li>
            <li ><a  href="#about">About</a></li>
        </ul>
    </div>
</nav>

The button is clickable but it's not showing the dropdown menu. Is it possible that someone can let me know what I'm doing wrong?

Thanks!

CodePudding user response：

Your code is working in the snippet, make sure you have included Bootstrap's JavaScript file as well!

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>

<nav >
    <a href="#" >Title</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
    </button>

    <div  id="menuItems">
        <ul >
            <li > <a target="_parent"  href="index.html"> Home <span >(current)</span></a> </li>
            <li ><a  href="#about">About</a></li>
        </ul>
    </div>
</nav>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

CodePudding user response：

Bootstrap's Javascript controls the animations of Bootstrap components like the navbar or the carousel. Link the js files using the script tags. I would prefer not to use the minified versions (files with .min extension)