0

I am facing an issue when trying to create a responsive menu or dropdown button with Bootstrap 5. Everything seems ok. The navigation icon & dropdown icon appear. But it's not working. When I clicked the nav icon or dropdown button, no dropdown menu appeared.

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- link rel="stylesheet" href="css/bootstrap.rtl.min.css" -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  <title>Test</title>
</head>

<body>
  <nav class="navbar navbar-light bg-light navbar-expand-sm mb-3">
    <a class="navbar-brand">Navbar</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" tabindex="0" data-bs-toggle="dropdown" data-bs-submenu="" aria-expanded="false">Dropdown 3</a>
          
          <div class="dropdown-menu dropdown-menu-right">
            <div class="dropdown dropend dropdown-submenu">
              <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown">Action</button>
              <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <div class="dropdown dropend dropdown-submenu">
                  <button class="dropdown-item dropdown-toggle" type="button">Another sub action</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item" type="button">Sub action</button>
                    <button class="dropdown-item" type="button">Another sub action</button>
                    <button class="dropdown-item" type="button">Something else here</button>
                  </div>
                </div>
                
                <button class="dropdown-item" type="button">Something else here</button>
                <button class="dropdown-item" type="button" disabled="">Disabled action</button>
                
                <div class="dropdown dropend dropdown-submenu">
                  <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item" type="button">Sub action</button>
                    <button class="dropdown-item" type="button">Another sub action</button>
                    <button class="dropdown-item" type="button">Something else here</button>
                  </div>
                </div>
              </div>
            </div>
            
            <div class="dropdown-header">Dropdown header</div>
            <div class="dropdown dropend dropdown-submenu">
              <button class="dropdown-item dropdown-toggle" type="button">Another action</button>
              <div class="dropdown-menu">
                <button class="dropdown-item" type="button">Sub action</button>
                <button class="dropdown-item" type="button">Another sub action</button>
                <button class="dropdown-item" type="button">Something else here</button>
              </div>
            </div>
            
            <button class="dropdown-item" type="button">Something else here</button>
            <div class="dropdown-divider"></div>
            <button class="dropdown-item" type="button">Separated link</button>
          </div>
        </li>
      </ul>
    </div>
  </nav>

  <!-- script src="js/bootstrap.bundle.min.js"></script -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Mahmoud Khosravi
  • 23
  • 6
  • As you can see from the demo I created with your code, it works. You'll need to investigate locally. Any console errors? – isherwood Sep 09 '22 at 12:58
  • you need a little bit of js to ensure that. https://stackoverflow.com/a/66470962/17447. marking this as duplicate. – naveen Sep 09 '22 at 13:24
  • Does this answer your question? [What is the clean way to implement Bootstrap 5 multi-level dropdown vertical navbar?](https://stackoverflow.com/questions/65913249/what-is-the-clean-way-to-implement-bootstrap-5-multi-level-dropdown-vertical-nav) – naveen Sep 09 '22 at 13:25
  • @isherwood: he is mentioning about the sub-menu – naveen Sep 09 '22 at 13:26
  • Then that should be made more clear in the question. It's not mentioned at all. – isherwood Sep 09 '22 at 13:28

0 Answers0