Bootstrap 5 dropdown menu fails

user_15684331 0
Viewed 731

As a relative newbee to Bootstrap I have been trying to code a menu with dropdowns. Code is listed below, but I find some issues:

  1. The menu code was copied from GetBootstrap.com docs. Looked at other sites to see where the problem may be, tried alternatives but no luck.
  2. bootstrap.min.css and bootstrap.bundle.min.js, both version 5, have been linked in to the code. Have tried these files directly on site and via links. Also tried popper.js plus bootstrap.min.js; same result.
  3. Direct links do work, but the dropdown part does not. Clicking on the dropdown item produces nothing. It would be great if it would show on hover and stay in place so that sub-items can be clicked.
  4. The menu should be on the righthand side of the screen; looking at answers, ms-auto should do this. It does not.
  5. When the screen is collapsed to tablet or phone size, the menu goes to the expected compressed symbol, but does not function at all; it will not show anything when clicked.
  <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">
           <img src="img/text835.png" width="160" height="48" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item" dropdown>
            <a class="nav-link dropdown-toggle" href="#"
                id="navbarConsultants" role="button" data-bs-toggle="dropdown" 
                aria-expanded="false">Consultants</a>
                <ul class="dropdown-menu" aria-labelledby="navbarConsultants">
                <li><a class="dropdown-item" href="#">Consultants</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item" href="#">Andy</a></li>
                    <li><a class="dropdown-item" href="#">Bill</a></li>
                </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
bootstrap-5 drop-down-menu
3 Answers

dropdown should be a class .. not an attribute:

<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">
           <img src="//via.placeholder.com/160x48" width="160" height="48" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
                id="navbarConsultants" role="button" data-bs-toggle="dropdown" 
                aria-expanded="false">Consultants</a>
                <ul class="dropdown-menu" aria-labelledby="navbarConsultants">
                <li><a class="dropdown-item" href="#">Consultants</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item" href="#">Andy</a></li>
                    <li><a class="dropdown-item" href="#">Bill</a></li>
                </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

Everything works as expected

user_1714560

Using CDN to integrate Bootstrap 5.0.0-beta3 resources, following should work.

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">

    <title>Custom Navbar with <strong>Bootstrap 5.0.0-beta3</strong></title>
  </head>
  <body>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
    -->

<div class="container">
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e6e6e6;">
    <div class="container-fluid">
    <a class="navbar-brand" href="#">
           <img src="img/text835.png" width="160" height="48" alt="">
      </a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
        data-bs-target="#navbarResponsive" aria-controls="navbarResponsive"
        aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarResponsive">
        <ul class="navbar-nav ms-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#"
                id="navbarConsultants" role="button" data-bs-toggle="dropdown" 
                aria-expanded="false">Consultants</a>
                <ul class="dropdown-menu" aria-labelledby="navbarConsultants">
                <li><a class="dropdown-item" href="#">Consultants</a></li>
                    <div class="dropdown-divider"></div>
                    <li><a class="dropdown-item" href="#">Andy</a></li>
                    <li><a class="dropdown-item" href="#">Bill</a></li>
                </ul>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact Us</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

  </body>
</html>

I hope, this will help you out!

Feel free to Upvote the answer

user_56671030

Thank you both to Manifest Man and Zim. I was using an earlier version of bootstrap 5 and when the latest version of bootstrap.min.css and bootstrap.bundle.min.js were used it started to work.

In addition, yes, dropdown is a class, not an attribute.

user_156843310
Related