Why the navbar dropdown in bootstrap 5 doesn't work-CodePudding

when I copy the code of the navbar dropdown from the documentation of bootstrap 5 the dropdown doesn't work, if I click on the dropdown the links ("action", "another action", "something else") of this last one don't show up, what should I do?

here is the code :

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav >
  <!-- Brand -->
  <a  href="#">Logo</a>

  <!-- Links -->
  <ul >
    <li >
      <a  href="#">Link 1</a>
    </li>
    <li >
      <a  href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li >
      <a  href="#" id="navbardrop" data-toggle="dropdown">
              Dropdown link
            </a>
      <div >
        <a  href="#">Link 1</a>
        <a  href="#">Link 2</a>
        <a  href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>
<br>

<div >
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>



<h1>Navbar</h1>
<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#">Action</a></li>
            <li><a  href="#">Another action</a></li>
            <li>
              <hr >
            </li>
            <li><a  href="#">Something else here</a></li>
          </ul>
      </ul>
    </div>
  </div>
</nav>

CodePudding user response：

Change this:

<a  href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a>

To this:

<a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>

Also add this:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav >
  <!-- Brand -->
  <a  href="#">Logo</a>

  <!-- Links -->
  <ul >
    <li >
      <a  href="#">Link 1</a>
    </li>
    <li >
      <a  href="#">Link 2</a>
    </li>

    <!-- Dropdown -->
    <li >
      <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>
      <div >
        <a  href="#">Link 1</a>
        <a  href="#">Link 2</a>
        <a  href="#">Link 3</a>
      </div>
    </li>
  </ul>
</nav>
<br>

<div >
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>



<h1>Navbar</h1>
<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#">Action</a></li>
            <li><a  href="#">Another action</a></li>
            <li>
              <hr >
            </li>
            <li><a  href="#">Something else here</a></li>
          </ul>
      </ul>
    </div>
  </div>
</nav>

<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

Not only do you need the CSS CDN. But you also need the JavaScript CDN's for the dropdown-menu to work.

You can find all documentation and Scripts for Bootstrap 5 Navbars and Bootstrap Dropdowns in the links provided.

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>




<h1>Navbar</h1>
<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#">Action</a></li>
            <li><a  href="#">Another action</a></li>
            <li>
              <hr >
            </li>
            <li><a  href="#">Something else here</a></li>
          </ul>
      </ul>
    </div>
  </div>
</nav>

<div >
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>

CodePudding user response：

<head>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u LWgxfKTRIcfu0JTxR EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
</head>




<h1>Navbar</h1>
<nav >
  <div >
    <a  href="#">Navbar</a>
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
    <div  id="navbarSupportedContent">
      <ul >
        <li >
          <a  aria-current="page" href="#">Home</a>
        </li>
        <li >
          <a  href="#">Link</a>
        </li>
        <li >
          <a  href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                  Dropdown
                </a>
          <ul  aria-labelledby="navbarDropdown">
            <li><a  href="#">Action</a></li>
            <li><a  href="#">Another action</a></li>
            <li>
              <hr >
            </li>
            <li><a  href="#">Something else here</a></li>
          </ul>
      </ul>
    </div>
  </div>
</nav>

<div >
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu in the navbar.</p>
</div>