Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uncaught TypeError when creating a dropdown button in Bootstrap 5

I'm trying to create Dropdown button using Bootstrap 5, but I'm getting an error:

Uncaught TypeError: t.createPopper is not a function

This is my HTML code:

<div class="dropdown">
    <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown link
    </a>

    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
        <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>

These are the scripts I am using:

<script src="assets/scripts/vendors/jquery-3.5.1.min.js"></script>
<script src="assets/scripts/vendors/popper.min.js"></script>
<script src="assets/scripts/vendors/bootstrap.min.js"></script>
like image 807
Ramy Mohamed Avatar asked Sep 01 '26 03:09

Ramy Mohamed


2 Answers

You can use bootstrap.bundle.min.js or bootstrap.bundle.js as an offline library which contains Popper. Ex:-

<script src="src/jquery-ui.min.js"></script>
<script src="src/bootstrap.bundle.min.js"></script>

This solved my problem. Hope this helps someone.

Your code is working but probably the Bootstrap or the Popper Library is not complete, try using CDN instead of the offline library.

The official documentation of Bootstrap.

<html>
   <head>
      <!--official Bootstrap CDN-->
         <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">

   </head>
   <body>
      <div class="dropdown">
         <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
         Dropdown link
         </a>
         <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <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>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
   </body>
</html>
like image 35
Kevin M. Mansour Avatar answered Sep 02 '26 19:09

Kevin M. Mansour



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!