NgxBootstrapNavbar

What does it do?

Native Angular component and directive for Bootstrap Navbar component. Uses bootstrap classes and Angular Animations for changing the navbars collapse.

Try it

See it in action with:

• Bootstrap 4 at https://stackblitz.com/edit/angular-14-bootstrap-4-dynamic-navbar
• Bootstrap 5 at https://stackblitz.com/edit/angular-14-bootstrap-5-dynamic-navbar

How to use it?

Install ngx-bootstrap-navbar in your project:

npm install ngx-bootstrap-navbar

Import the NgxNavbarModule in your app.module.ts:

import { NgxNavbarModule } from 'ngx-bootstrap-navbar';

@NgModule({
  imports: [
    BrowserAnimationsModule,
    NgxNavbarModule
  ],
})
export class AppModule {}

Use the ngx-navbar-collapse component as the container of the .navbar-nav, it applies the basic bootstrap classes too. If you want to dynamically detect that the navbar fits and can be expanded use the ngxNavbarDynamicExpand directive on the navbar. It applies the .navbar and .text-nowrap classes. The .text-nowrap class is crucial, at the begining it's used to detect that css files are loaded.

<nav ngxNavbarDynamicExpand class="navbar-light bg-light">
  <button class="navbar-toggler" type="button" (click)="collapse.toggle()">
    ....
  </button>
  <ngx-navbar-collapse #collapse="ngxNavbarCollapse">
    <ul class="navbar-nav mr-auto">
      ...
    </ul>
  </ngx-navbar-collapse>
</nav>

Compatibility

• @angular/core: ^14.0.0,
• @angular/cdk: ^14.0.0,
• bootstrap: ^4.0.0 || ^5.0.0,

Development

Library Build / NPM Package

Run npm run build:lib to build the library and generate an NPM package. The build artifacts will be stored in the dist/ngx-bootstrap-navbar folder.

Development server

Run npm run develop for building the lib and watch it's changes, then run npm run start for a dev server. Navigate to http://localhost:4203/. The app will automatically reload if you change any of the source files.