This library provides components for implementing a Material Design bottom navigation.
npm install ngx-bottom-nav
This library provides Angular components for implementing a
Material Bottom Navigation.
It relies on the Angular Material Library and
integrates with Angular's router.
Before installing, make sure to add Angular Material to your project. When using Angular CLI, you can run:
``
ng add @angular/material
For alternative installation refer to the quick start guide.
Using npm, you can install the library with:
`
npm install --save ngx-bottom-nav
If you want to benefit from Material theming, you need to use Angular Material
with a custom theme.
Then, you can add theming to the nav bar layout like this:
`scss
@import '~@angular/material/theming';
@import '~ngx-bottom-nav/theming'; // <-- include SASS lib file
@include mat-core();
$primary: mat-palette($mat-indigo);
$accent: mat-palette($mat-pink, A200, A100, A400);
$warn: mat-palette($mat-red);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
@include ngx-bottom-nav-theme($theme); // <-- include the bottom nav theme
`
1. Import the BottomNavModule
`javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BottomNavModule } from 'ngx-bottom-nav';
@NgModule({
imports: [
BrowserModule,
BottomNavModule, // <-- import module
],
bootstrap: [AppComponent],
})
export class AppModule {}
`
2. Use the BottomNavComponent
`html
``
app.component.html