Solve - Bootstrap dropdown require Popper.js Error in JS

avatar

Borislav Hadzhiev

Tue Oct 19 20212 min read

banner

Photo by Annie Spratt

Solve - Bootstrap dropdown require Popper.js Error #

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.

index.html
<!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.

index.js
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.

index.html
<!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:

index.js
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.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee