CODEWITHSUNDEEP
htmlnavbarreact-bootstrap
Zach Goyer
Zach Goyer

Reputation: 1

problem with Bootstrap dropdown menu not dropping down

So I'm trying to develop a web app with a navbar and a dropdown menu. So far, the navbar is working great, with all the functions working as expected, but the dropdown menu I'm now trying to add is not dropping down. I've looked through the documentation on the Bootstrap website, but even direct copying working code from their site isn't fixing the problem.

Below is the section of code for the Navbar:

enter code here
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="#"><img src="../Images/Brand2.png" alt="brand" width="120px" height="30px"></img></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 mr-auto">
                        <li> <Link to={'/InputMission'} className="nav-link active">Input Mission</Link></li>
                        <li> <Link to={'/missions'} className="nav-link">Missions</Link></li>
                        <li><Link to={'/adminActions'} className="nav-link">Admin</Link></li>
                        <li><Link to={'/testBranch'} className="nav-link">Admin Functions</Link></li>
                        <li className="nav-item dropdown">
                             <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                              </a>
                              <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                 <a className="dropdown-item" href="#">Action</a>
                                 <a className="dropdown-item" href="#">Another action</a>
                                </div>
                            </li>
         {//               <li class="nav-item dropdown"><Link to={'/adminActions'} class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" className="nav-link">Admin</Link></li>
          //              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          //                  <a class="dropdown-item" href="#">Add</a>
          //                  <a class="dropdown-item" href="#">Edit</a>
          //                  <a class="dropdown-item" href="#">Delete</a>
          //                  </div>
         }
                    </ul>
                </div>
            </nav>

Upvotes: 0

Views: 173

Answers (2)

devanggarach
devanggarach

Reputation: 224

add popper.js file in script tag it works.

Dropdowns are built on a third-party library, Popper.js, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js. Popper.js isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.

add this

   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

Upvotes: 1

Zach Goyer
Zach Goyer

Reputation: 1

Update, turns out I did not have the proper JS scripts installed on my .HTML page. it's working now.

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

Upvotes: 0

Related Questions