Hujjat's avatar
Hujjat
OP
8 years ago
Level 10

Bootstrap 4 dropdown menu is not working.

Hi. I have a fresh Laravel 5.5. I have change the webpack and asset configurations to use Bootstrap v4.

Everything is working except the drop down menu for. It can't open the menu And I don't see any error as well. the webpack compiles everything successfully.

Here is the dropdown menu code that's not working.


    <li class="nav-item dropdown">
         <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
        </li>

Note : the collapse navigation is working just fine. means my javascript files are okay.

Thank's :)

0 likes
10 replies
galironfydar's avatar

What version of bootstrap 4 are you using and how have you loaded it into web pack? Using sass/css etc...?

36864's avatar
36864
8 years ago
Best Answer
Level 13

I assume you're using booststrap v4 beta 1. Bootstrap beta 1 switched to Popper.js for dropdowns, so you need to include that in your javascript mix. Add window.Popper = require('popper.js').default; to your app.js, so it looks something like this:

(...)
try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('popper.js').default;
    require('bootstrap');
} catch (e) {}
(...)

Edit for posterity: Make sure you install popper. npm install [email protected] --save

19 likes
Hujjat's avatar
Hujjat
OP
8 years ago
Level 10

@galironfydar I have correctly add the the bootstrap v4.0.0-beta.

Downloaded through npm and updated the app.scss and bootstrap.js in the resources/asset directory.

Everything is working until here.

@36864 thank's for the response.

I have read about popperjs and bootstrap v4 require it. But what you have written is not working.

it gave an error.


    This dependency was not found:

    * popper.js in ./resources/assets/js/bootstrap.js
csommers79's avatar

works great - one question though: why is the '.default' added to the end of the window.Popper = require.. initializer? i noticed it doesn't seem to be needed for jquery, yet without it, it doesn't run properly...

thanks!

36864's avatar

I won't pretend to fully understand it, but it has something to do with ES6 and the way mix expects functions to be declared.

As far as I can tell, the default function should be loaded when you load the file without specifying a function, but mix doesn't do that.

Note that this may be fixed in the future so as to not require the use of .default or indeed even cause breakage if .default is used, so if after an update things stop working make sure to check that first.

1 like
Cronix's avatar

@boonrich It's usually best to start your own topic instead of replying to one that is marked as solved. A lot of people don't look at threads that are marked as solved unless they have the same issue.

Please or to participate in this conversation.