Navbar dropdown menus not working outside of getbootstrap.com page

[MickeySegal]

The dropdown menu code in the Navbar in bootstrap/4.0.0-beta shows unexpected variability depending on the environment.

Running the dropdown code from https://getbootstrap.com/docs/4.0/components/navbar/ the dropdown works fine.

However, when the same code is put on another page with the Bootstrap starter template code, the dropdown doesn't work and the browser only goes off to example.com. This is illustrated at http://plnkr.co/edit/TbnlswWCKxoGIi7uLRS6?p=preview (may need to widen the preview menu for components to show up).

It is not clear which behavior is correct, but the variation in different environments seems surprising.

I see the same behavior on Windows 10 in Chrome, Firefox and Edge, all with latest release versions.

There seems to be some other dependence from what is described in the setup instructions. I've seen the same lack of functioning of the dropdown in other more complicated situations. If there are other factors to specify to get the dropdown to work they should be made more clear.

[mdo]

You're missing the JS that's required for the dropdowns. See the https://getbootstrap.com homepage for the CDN links to jQuery, Popper, and Bootstrap's JS file.

[MickeySegal]

Thanks. My setups can't include the JavaScript stuff since it conflicts with Angular, so the JavaScript imports are easy to forget.

Since there are no ng-bootstrap examples for navbar and the dropdown examples at https://ng-bootstrap.github.io/#/components/dropdown/examples don't include a navbar example, here is some navbar with dropdown code that seems to work for ng-bootstrap with Bootstrap 4 beta (and without the JavaScript imports):

  <nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li ngbDropdown class="nav-item">
          <a class="nav-link" id="navbarDropdownMenuLink" ngbDropdownToggle aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>
          <div ngbDropdownMenu 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>
      </ul>
    </div>
  </nav> 

[mdo]

The navbar docs include an example :).

Edit: Oh sorry, that's for Angular. Carry on then! <3

[PendelinP]

Thanks a lot @MickeySegal !

Seems a bit strange that you have to use ng-bootstrap stuff in Angular applications. Nevertheless here is a solution with working hamburger icon as well: https://stackoverflow.com/a/46883241/1820522

[3centsFR]

Take the pooper.min.js from the bootstrap site and not from pooper site and that work for me !