CODEWITHSUNDEEP
twitter-bootstrapangularng-bootstrap
Kery Hu
Kery Hu

Reputation: 5906

How to add ngbDropdown to bootstrap 4 navbar

I use ng-bootstrap Angular 2.

    <nav class="navbar navbar-fixed-top navbar-dark bg-inverse"> 
        <ul class="nav navbar-nav">  
           <li class="nav-item">
                <a class="nav-link" href="#">About</a>
           </li>
            <li class="nav-item">
                <div ngbDropdown>
                  <button class="btn" ngbDropdownToggle>Projects</button>
                  <div class="dropdown-menu">
                    <button class="dropdown-item"  >AA</button>
                  </div>
                </div>
            </li>
        </ul>
     </nav>

The problems "dropdown-menu" could not be expanded

Upvotes: 6

Views: 13402

Answers (3)

TheNetRunner
TheNetRunner

Reputation: 31

I ended up with this for bootstrap 5.

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your App</a>

  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>

    <!-- Dropdown Menu -->
    <li ngbDropdown class="nav-item">
      <a
        class="nav-link"
        id="dropdownMenu"
        ngbDropdownToggle
      >
        Dropdown
      </a>
      <div ngbDropdownMenu aria-labelledby="dropdownMenu">
        <a ngbDropdownItem href="#">Item 1</a>
        <a ngbDropdownItem href="#">Item 2</a>
        <a ngbDropdownItem href="#">Item 3</a>
      </div>
    </li>
  </ul>
</nav>

Upvotes: 1

ulubeyn
ulubeyn

Reputation: 3021

If you want your navbar toggleable, check this out;

<nav class="navbar navbar-dark bg-inverse">
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#navExample" aria-controls="navExample" aria-expanded="false" aria-label="Toggle navigation">
    &#9776;
</button>
<div class="collapse navbar-toggleable-xs" id="navExample">
    <ul class="nav navbar-nav">
        <li class="nav-item">
            <a href="#" class="nav-item nav-link">First link</a>
        </li>
        <li class="nav-item">
            <a href="#" class="nav-item nav-link">Second link</a>
        </li>
    </ul>
</div>

If you want just a dropdown menu in your navigation bar, example in official site should work;

<div ngbDropdown class="d-inline-block">
    <button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <button class="dropdown-item">Action - 1</button>
        <button class="dropdown-item">Another Action</button>
        <button class="dropdown-item">Something else is here</button>
    </div>
</div>

Be sure your html file include bootstrap (I use bootstrap 4).

Upvotes: 0

pkozlowski.opensource
pkozlowski.opensource

Reputation: 117370

It is hard to see what is going on in your particular project as I've just did copy & paste of your code and it works perfectly fine, check this plunker: http://plnkr.co/edit/CFntB5mkshJ97x1aIGU1?p=preview

You might want to verify if you properly importing (import {NgbModule} from '@ng-bootstrap/ng-bootstrap') adding the NgbModule module:

@NgModule({ imports: [ BrowserModule, NgbModule ], declarations: [ App ], bootstrap: [ App ] }) export class AppModule {}

Upvotes: 2

Related Questions