Search code examples
navbarbootstrap-5

Dropdown arrow Shows nothing on click in Navigation Bar

I have made a navbar in bootstrap with a dropdown but it is not working.

enter image description here

Whenever i click the dropdown arrow, it shows me nothing. Following is the code i am using for the complete navbar:

<nav class="navbar navbar-expand-md navbar-light bg-light"> <a class="navbar-brand" href="#"><span class="glyphicon glyphicon-fire"></span>Responsive Design</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 class="nav-item active"\>
          \<a class="nav-link" href="#" style="text-decoration:none;"\>Home \<span class="sr-only"\>(current)\</span\>\</a\>
        \</li\>
        \<li class="nav-item"\>
          \<a class="nav-link" href="#" style="text-decoration:none;"\>Link\</a\>
        \</li\>
        \<li class="nav-item dropdown"\>
          \<a style="text-decoration:none;" class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"\>
            Services
          \</a\>
          \<ul class="dropdown-menu" aria-labelledby="navbarDropdown"\>
            \<li\>\<a class="dropdown-item" href="#"\>Web Design\</a\>\</li\>
            \<li\>\<a class="dropdown-item" href="#"\>IOS Development\</a\>\</li\>
            \<li\>\<hr class="dropdown-divider"\>\</li\>
            \<li\>\<a class="dropdown-item" href="#"\>SEO\</a\>\</li\>
          \</ul\>
        \</li\>
        \<li class="nav-item"\>
          \<a class="nav-link disabled" href="#"\>Disabled\</a\>
        \</li\>
      \</ul\>
      \<form class="navbar-form navbar-right d-flex"\>
        \<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"\>
        \<button class="btn btn-success my-2 my-sm-0" type="submit"\>Search\</button\>
      \</form\>
    \</div\>
  \</nav\>
Solution

  • To use dropdowns with Bootstrap-5 you can use the following code:

    <div class="dropdown">
    
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton1" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown button
    </button>
    
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
    </ul>

</div>

    Don't forget to insert the JS bundle in your head otherwise this won't work:

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

    For more info see the Bootstrap docs about dropdowns