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:
- Load Bootstrap CSS on the page.
- Load the jQuery script (this is optional).
- Load the Bootstrap bundle.
- Run our own JavaScript file (
index.jsin 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.
If you prefer to load the
bootstrap.min.jsandpopper.min.jsscript separately, you can also do that, just make sure to place thepopper.min.jsscript abovebootstrap.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.
