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:
`typescript
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.
`html

`

$3

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

Development

$3

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.

$3

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.