Search code examples
htmlcssdropdownnavbarcdn

Bootstrap 5.2 Navbar Dropdown doesn't work

I apologize for the topic! I've found many similar topics and advises, however nothing help. I want to create dropdown <a> menu inside the navbar. The code is:

<head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>
   
    <link href="css/navbar.css" rel="stylesheet" />
</head>

<body id="page-top">
    <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
        <div class="container-fluid">
            <a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
            <ul class="navbar-nav ms-auto py-4 py-lg-0">
                <li class="nav-item dropdown">
                    <a 
                        class="nav-link dropdown-toggle" 
                        href="#about"
                        id="navbarDropdownMenuLink"
                        role="button"
                        data-bs-toogle="dropdown"
                        aria-expanded="false"
                        aria-haspopup="true"
                    >
                        About
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink" >
                        <li>
                            <a class="dropdown-item" href="#">One</a>
                        </li>
                        <li>
                            <a class="dropdown-item" href="#">Two</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</body>
Solution

  • Change the "data-bs-toogle="dropdown" to "data-bs-toggle="dropdown". Check the spelling of toggle. Try this:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.min.js" integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous"></script>   
    <link href="css/navbar.css" rel="stylesheet" />    
</head>
<body id="page-top">
  <nav class="navbar navbar-expand-lg navbar-light bg-white fixed-top" id="mainNav">
    <div class="container-fluid">
      <a class="navbar-brand" href="#page-top"><img src="" alt="..." /></a>
        <ul class="navbar-nav ms-auto py-4 py-lg-0">
            <li class="nav-item dropdown">
                <a 
                    class="nav-link dropdown-toggle" 
                    href="#about"
                    id="navbarDropdownMenuLink"
                    role="button"
                    data-bs-toggle="dropdown"
                    aria-expanded="false"
                    aria-haspopup="true"
                >
                    About
                </a>
                <ul class="dropdown-menu position-absolute" aria-labelledby="navbarDropdownMenuLink" >
                    <li>
                        <a class="dropdown-item" href="#">One</a>
                    </li>
                    <li>
                        <a class="dropdown-item" href="#">Two</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
  </nav>
</body>

</html>