Bootstrap Navbar Hamburger Menu Not Working

Issue

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 class="navbar navbar-expand-lg fixed-top">
    <a href="#" class="navbar-brand">Title</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menuItems">
        <ul class="navbar-nav">
            <li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"><a class="nav-item nav-link active" 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!

Solution

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/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  </head>

<nav class="navbar navbar-expand-lg fixed-top">
    <a href="#" class="navbar-brand">Title</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#menuItems" aria-controls="menuItems" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="menuItems">
        <ul class="navbar-nav">
            <li class="nav-item"> <a target="_parent" class="nav-item nav-link active" href="index.html"> Home <span class="sr-only">(current)</span></a> </li>
            <li class="nav-item"><a class="nav-item nav-link active" href="#about">About</a></li>
        </ul>
    </div>
</nav>

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

Answered By - Simp4Code