Angular Bottom Navigation

This library provides Angular components for implementing a Material Bottom Navigation. It relies on the Angular Material Library and integrates with Angular's router.

Installing

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

Enabling Material theming

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:

@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

Usage

1. Import the BottomNavModule

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

<ngx-bottom-nav>
  <button ngx-bottom-nav label="Home" routerLink="/" exact="true">
    <mat-icon ngxBottomNavIcon>home</mat-icon>
  </button>

  <button ngx-bottom-nav label="Search" routerLink="/search">
    <mat-icon ngxBottomNavIcon>search</mat-icon>
  </button>

  <button ngx-bottom-nav label="Forum" routerLink="/forum">
    <mat-icon ngxBottomNavIcon>forum</mat-icon>
  </button>
</ngx-bottom-nav>

app.component.html