# ng-bottom-navigation

> A small library which adds a material bottom nav bar.

Latest version **0.3.0** (published 2020-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install ng-bottom-navigation
pnpm add ng-bottom-navigation
yarn add ng-bottom-navigation
bun add ng-bottom-navigation
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2020-04-30 |
| First published | 2020-04-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 222.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | HuiiBuh |
| Maintainers | huiibuh |
| Keywords | angular, angular 9, angular material, material, bottom, navigation, bottom navigation |

## Links

- npm: https://www.npmjs.com/package/ng-bottom-navigation
- Repository: https://github.com/HuiiBuh/ng-bottom-navigation
- Issues: https://github.com/HuiiBuh/ng-bottom-navigation/issues
- npm.io page: https://npm.io/package/ng-bottom-navigation

## Alternatives

- [express-promise-router](https://npm.io/package/express-promise-router.md) — 736.1K weekly downloads
- [next-usequerystate](https://npm.io/package/next-usequerystate.md) — 29.8K weekly downloads
- [@bitkyc08/opencodex](https://npm.io/package/@bitkyc08/opencodex.md) — 4.6K weekly downloads
- [lynkr](https://npm.io/package/lynkr.md) — 575 weekly downloads
- [baremetal.js](https://npm.io/package/baremetal.js.md) — 42 weekly downloads

## Recent versions

- 0.3.0 (latest) — 2020-04-30
- 0.2.1 — 2020-04-29
- 0.1.2 — 2020-04-16
- 0.1.1 — 2020-04-16
- 0.1.0 — 2020-04-16

## README

# Bottom Navigation Bar

## Installation

[NPM package](https://www.npmjs.com/package/ng-bottom-navigation).  
__This package was build with Ivy!__

```bash
npm install --save ng-bottom-navigation
```

## Dependencies

+ [Angular material](https://material.angular.io/)

Both libraries have to be installed in your project.  
In addition to this angular routing has to be enabled.

## Usage

```html
<!-- A wrapper for the hole page -->
<!-- Specify the height of the bottom nav, the top nav and the breakpoint between the two of them. If you don't intend  -->
<!-- If you don't intend to use a top nav for desktop devices ignore the topNavHeight and the bottomNavBreakpoint parameter -->
<bottom-nav-wrapper bottomNavHeight="60px" topNavHeight="60px" bottomNavBreakpoint="600px">

  <!-- Top nav content. Optional and only use it if you want a nav bar for desktop devices -->
  <top-nav-wrapper>
    <!-- Your nav -->
  </top-nav-wrapper>

  <!-- The main content has to be inside here -->
  <!-- You can add a nav, ... It is recommended to put the router in here -->
  <application-content>
    <router-outlet></router-outlet>
  </application-content>

  <!-- The bottom nav bar -->
  <bottom-nav>

    <!-- Add a bottom-nav-item for every  icon in the bottom nav. -->
    <!-- The name in the bottom-nav-icon (home) is the name of the material icon -->
    <!-- Use the link input like a [routerLink] -->
    <bottom-nav-item link="">
      home
    </bottom-nav-item>

    <!-- Do you want to match the provided path exactly, -->
    <!-- or do you want to include paths which extend the path into the path matching (default not exact) -->
    <!-- /like/me would be matched if exact is false -->
    <bottom-nav-item [link]="'like'" [exact]="true">
      thumb_up
    </bottom-nav-item>

    <!-- The label is optional and adds a ... label to the icon -->
    <bottom-nav-item link="watch" [exact]="true" label="watch">
      watch_later
    </bottom-nav-item>

  </bottom-nav>

</bottom-nav-wrapper>
```

In addition to the html you have to include the `ng-bottom-navigation.scss` file in your index.scss file!

## Configuration and theming

### Configuration

The parameters of the `bottom-nav-wrapper` component are optional. You can leave them empty to use the default value (default values are the values in the example)-

You can add an optional topNav (see example) if you want to. The library will automatically switch between the two nav bars depending on the `bottomNavBreakpoint` parameters.


### Theming
If you are using a custom theme you can take advantage of the theming mixin fo the bottom navigation bar.  
Import the `ng-bottom-navigation.scss` file and use the `bottom-nav-theme` mixin.
  
```scss
// Earlier created custom theme
$light-theme: mat-light-theme($primary, $accent, $warm);

// Include the mixin and pass your custom theme
@include bottom-nav-theme($light-theme);

// You can also pass the colorful option ot the mixin. This will change the background color of the nav bar to your primary color
@include bottom-nav-theme($light-theme, colorful)

// You also have to include the mixin in your dark theme and padd the dark theme to it
.dark-theme {
  $dark-theme: mat-light-theme($primary, $accent, $warm);
  @include bottom-nav-theme($dark-theme)
}


```

## Result

![result](https://i.imgur.com/O3mhtkA.png)

---
_Source: https://npm.io/package/ng-bottom-navigation · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._