Bootstrap 5.2 menu drop down is not working - why

Question

I upgraded from bootstrap 4.6 to 5.2 Everything looks fine, only the menu drop down does not work so the choices available can not be made. I reduced the problem to two menu choices: the drop down and a simple link. The simple link ('Home') works fine. The dropdown does not drop to show the elements. What is wrong here? NB: the menu has not been changed wrt bootstrap 4.6 (apart from the mr-auto was ml-auto). None of the dropdowns works. NB: compare this example: https://getbootstrap.com/docs/5.0/components/navbar/

Please note that the answers can be found elsewhere on stackoverflow but the most understanding for me comes from here: What is the difference between Bootstrap data-toggle vs data-bs-toggle attributes?

<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'>

<nav class='navbar navbar-default navbar-expand-lg '>
  <div class='collapse navbar-collapse justify-content-end' id='navbarSupportedContent'>
    <ul class='navbar-nav mr-auto'>
      <li class='nav-item dropdown'>
        <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
        <div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
          <span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
          <span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
          <span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
          <a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
        </div>
      </li>
      <li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
    </ul>
  </div>
</nav>

Rok Benko · Accepted Answer · 2022-08-31T14:31:14.673

Here you go...

Change data-toggle='dropdown' (Bootstrap 4.6) to data-bs-toggle='dropdown' (Bootstrap 5.2).

Note: Be careful, the link you've provided above is for Bootstrap 5.0, not 5.2.

See the snippet below.

<script defer src='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js'></script>
<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css'>

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
      <ul class='navbar-nav mr-auto'>
        <li class='nav-item dropdown'>
          <a class='nav-link dropdown-toggle' href='#' id='navbarDropdownAbout' role='button' data-bs-toggle='dropdown' aria-haspopup='true' aria-expanded='false'>About</a>
          <div class='dropdown-menu' aria-labelledby='navbarDropdownAbout'>
            <span class='nav-link' data-toggle='modal' data-target='#CUserAbout'>This Site</span>
            <span class='nav-link' data-toggle='modal' data-target='#CUabout'>Utils</span>
            <span class='nav-link' data-toggle='modal' data-target='#CUlicense'>License</span>
            <a class='nav-link' href="https://wikipedia.org/" target="_blank">Wiki</a>
          </div>
        </li>
        <li class='nav-item'> <span class='nav-link' onclick="function('charts.txt', true);">Home</span> </li>
      </ul>
    </div>
  </div>
</nav>

I added the navbar-toggler and the div 'container-fluid' but it does not help, still the dropdowns do not drop down. I also replaced the with
Ahhh, you mean the dropdown inside the navbar... Sorry, my bad. I updated my answer. — Rok Benko, Aug 31 '22 at 14:32
Unfortunately not all my dropdowns use a modal but they do not work either. So it is not the data-toggle change. I can't get the menu button on the bar to show the available menu choices when I click. — Hans Rottier, Aug 31 '22 at 14:36
Ahh.... now it is my bad. I missed where you inserted the bs. I got it and it is OK. The menu is working now. Thanks for the patience! — Hans Rottier, Aug 31 '22 at 15:13

Bootstrap 5.2 menu drop down is not working - why

1 Answers1