Angular Bootstrap: Navbar doesn't expand

Question

I have an Angular project with Bootstrap for styling. I want to make a menu bar with a dropdown icon when the screen is too small to show al the menu items. When the screen is large, all the menu items are shown and when the screen is small the expand icon is shown, but the menu does not expand when clicking on the icon.

I have added bootstrap to my Angular project by doing the following: ng add @ng-bootstrap/ng-bootstrap

My html code looks like this (It was copied from the Bootstrap website):

<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="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
      <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
    </div>
  </div>
</nav>

This are the dependencies in the package.json file:

 "dependencies": {
    "@angular/animations": "^14.2.0",
    "@angular/cdk": "^14.2.2",
    "@angular/common": "^14.2.0",
    "@angular/compiler": "^14.2.0",
    "@angular/core": "^14.2.0",
    "@angular/flex-layout": "^14.0.0-beta.40",
    "@angular/forms": "^14.2.0",
    "@angular/localize": "^14.2.0",
    "@angular/material": "^14.2.2",
    "@angular/platform-browser": "^14.2.0",
    "@angular/platform-browser-dynamic": "^14.2.0",
    "@angular/router": "^14.2.0",
    "@popperjs/core": "^2.11.6",
    "@ng-bootstrap/ng-bootstrap": "^13.0.0",
    "bootstrap": "^5.3.0-alpha1",
    "jquery": "^3.6.3",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },

I did the bootstrap.css import in the styles.css file like this

@import "~bootstrap/dist/css/bootstrap.css";

Did I forget some imports or did I do something else wrong?

You need to use the actual component: <ul ngbNav>. That's the only way to get the javascript working. However, I see that they only implemented the navs, and not the navbar. If you'd insist, you may want to take a look at this navbar, implemented here, demonstrated here — Pieterjan
– Pieterjan, Commented Jan 16, 2023 at 19:51

Muhammad Azeem Saleem · Accepted Answer · 2023-01-17 06:02:08Z

1

You are not using ng-bootstrap ngbCollapse directive to handle collapse.

Look at this link, You will find complete example (Responsive Navbar) of menu with collapse and expand.

answered Jan 17, 2023 at 6:02

Muhammad Azeem Saleem

113 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Bootstrap: Navbar doesn't expand

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related