Bootstrap dropdown require popper js 

The “Bootstrap dropdown require Popper.js” error occurs when we use a Bootstrap component that requires the Popper.js script, but don’t include the script on the page. To solve the error, include the Bootstrap bundle script, before running your JavaScript code. To use the functionality of the dropdown menu, we have to load the Popper.js script on…

The “Bootstrap dropdown require Popper.js” error occurs when we use a Bootstrap component that requires the Popper.js script, but don’t include the script on the page. To solve the error, include the Bootstrap bundle script, before running your JavaScript code.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ load Bootstrap CSS ✅ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <!-- 👇️ Dropdown menu  -->
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

    <!-- ✅ load jQuery (optional) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load Bootstrap bundle ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

To use the functionality of the dropdown menu, we have to load the Popper.js script on the page.

The Bootstrap Bundle includes the Popper.js script for the functionality of dropdowns, modals, tooltips, popovers, etc.

Notice the order we loaded the scripts in:

  1. Load Bootstrap CSS on the page.
  2. Load the jQuery script (this is optional).
  3. Load the Bootstrap bundle.
  4. Run our own JavaScript file (index.js in the example)

Here’s the code in the index.js file, where we added an event listener that logs a message when the dropdown is shown.

const myDropdown = document.getElementById('dropdownMenuButton1');

myDropdown.addEventListener('show.bs.dropdown', function () {
  console.log('Dropdown shown');
});

If you open the page in your browser, you’ll see that the dropdown works as expected.

dropdown works

If you prefer to load the bootstrap.min.js and popper.min.js script separately, you can also do that, just make sure to place the popper.min.js script above bootstrap.min.js.

Here’s the same example, however instead of using the Bootstrap bundle, we use the separate scripts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- ✅ load Bootstrap CSS ✅ -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
  </head>

  <body>
    <div class="dropdown">
      <button
        class="btn btn-secondary dropdown-toggle"
        type="button"
        id="dropdownMenuButton1"
        data-bs-toggle="dropdown"
        aria-expanded="false"
      >
        Dropdown button
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
        <li><a class="dropdown-item" href="#">Action</a></li>
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
      </ul>
    </div>

    <!-- ✅ load jQuery (optional) ✅ -->
    <script
      src="https://code.jquery.com/jquery-3.6.0.min.js"
      integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load popper.js ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js"
      integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
      crossorigin="anonymous"
    ></script>

    <!-- ✅ load Bootstrap JS ✅ -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"
      integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
      crossorigin="anonymous"
    ></script>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

If you decide to use the separate scripts instead of the Bootstrap bundle, make sure to load the Popper.js script before the Bootstrap plugins script, especially if you’re using dropdown menus, tooltips or popovers in your code.

The code in the index.js file is the same as in the last example:

const myDropdown = document.getElementById('dropdownMenuButton1');

myDropdown.addEventListener('show.bs.dropdown', function () {
  console.log('Dropdown shown');
});

We simply add an event listener that invokes a function each time the dropdown menu is shown.

Similar Posts

Leave a Reply

Your email address will not be published.