# material-bottom-nav [![CI Status][ci-badge]][ci] [![License][license-badge]][license] [![npm version][npm-badge]][npm] [![npm downloads][downloads-badge]][downloads] [![dependencies status][dependencies-badge]][dependencies] [![devDependencies status][devDependencies-badge]][devDependencies] [![peerDependencies status][peerDependencies-badge]][peerDependencies] A bottom navigation bar adhering to the [Material Design specification][spec]. It is written purely using [Sass][sass] mixins which allow you to apply the style rules to any class, as shown in the [demo page's stylesheet][demo.scss]. A running demonstration can be found [here][demo]. [![Three destinations](/img/index.png)](https://michaelbull.github.io/material-bottom-nav/)
## Installation Install the package via npm: ``` npm install --save material-bottom-nav ``` ## Usage Apply the mixin to a class: ```scss @use '~material-bottom-nav' as bottom-nav; .bottom-nav { @include bottom-nav.root( $background-color: #009688, $active-color: #FFFFFF, $inactive-color: #E0E0E0 ); } ``` Structure your template: ```html ``` ## Hiding inactive labels The `$hide-inactive-labels` argument defaults to `false`. It is used to hide the text label of any inactive destinations as described in the [anatomy][spec-anatomy] section of the official spec. [**Demo**](https://michaelbull.github.io/material-bottom-nav/hidden-labels.html)

Style

```scss @use '~material-bottom-nav' as bottom-nav; .hidden-labels-nav { @include bottom-nav.root( $background-color: #009688, $active-color: #FFFFFF, $inactive-color: #E0E0E0, $hide-inactive-labels: true ); } ```

Template

```html

```

[![Hidden labels](/img/hidden-labels.png)](https://michaelbull.github.io/material-bottom-nav/hidden-labels.html)
## Badges Bottom navigation icons can include badges in their upper right corner. These badges can contain dynamic information, such as a number of pending requests. [**Demo**](https://michaelbull.github.io/material-bottom-nav/badges.html)

Style

```scss @use '~material-bottom-nav' as bottom-nav; .badges-nav { @include bottom-nav.root( $background-color: white, $active-color: #6200EE, $inactive-color: #757575, $hide-inactive-labels: true ); } ```

Template

```html

```

[![Badges](/img/badges.png)](https://michaelbull.github.io/material-bottom-nav/badges.html)
## Horizontal On mobile (in landscape mode) or tablet, bottom navigation destinations can be positioned horizontally instead of stacked. [**Demo**](https://michaelbull.github.io/material-bottom-nav/horizontal.html)

Style

```scss @use '~material-bottom-nav' as bottom-nav; .horizontal-nav { @include bottom-nav.root( $background-color: #6200EE, $active-color: white, $inactive-color: #BB86FC ); @include bottom-nav.horizontal(); } ```

Template

```html

```

[![Horizontal](/img/horizontal.png)](https://michaelbull.github.io/material-bottom-nav/horizontal.html)
## Customization The box-model and colors of the individual styles within this component can be configured by overriding the default variable values defined in [`bottom-nav.scss`][mixin]. ```scss @use '~material-bottom-nav' as bottom-nav with ( $destination-horizontal-padding: 4px, // reduce the horizontal padding within each destination $icon-font-size: 28px, // increase the icon size ); .bottom-nav { @include bottom-nav.root(#009688, #FFFFFF, #E0E0E0); } ``` ## Contributing Bug reports and pull requests are welcome on [GitHub][github]. ## License This project is available under the terms of the ISC license. See the [`LICENSE`][license] file for the copyright information and licensing terms. Examples used include icons from the [Material Design Icons][material-icons] project ([LICENSE][material-icons-license]). [ci-badge]: https://github.com/michaelbull/material-bottom-nav/workflows/ci/badge.svg [ci]: https://github.com/michaelbull/material-bottom-nav/actions?query=workflow%3Aci [license-badge]: https://img.shields.io/github/license/michaelbull/material-bottom-nav.svg [license]: https://github.com/michaelbull/material-bottom-nav/blob/master/LICENSE [npm-badge]: https://img.shields.io/npm/v/material-bottom-nav.svg [npm]: https://www.npmjs.com/package/material-bottom-nav [downloads-badge]: https://img.shields.io/npm/dt/material-bottom-nav.svg [downloads]: https://www.npmjs.com/package/material-bottom-nav [dependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav.svg [dependencies]: https://david-dm.org/michaelbull/material-bottom-nav [devDependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav/dev-status.svg [devDependencies]: https://david-dm.org/michaelbull/material-bottom-nav?type=dev [peerDependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav/peer-status.svg [peerDependencies]: https://david-dm.org/michaelbull/material-bottom-nav?type=peer [spec]: https://material.io/components/bottom-navigation [spec-anatomy]: https://material.io/components/bottom-navigation#anatomy [sass]: http://sass-lang.com/guide [demo.scss]: https://github.com/michaelbull/material-bottom-nav/blob/master/demo/index.scss#L72 [demo]: https://michaelbull.github.io/material-bottom-nav/ [mixin]: https://github.com/michaelbull/material-bottom-nav/blob/master/bottom-nav.scss# [svg]: https://developer.mozilla.org/en-US/docs/Web/SVG [material-icons]: https://materialdesignicons.com/ [material-icons-license]: https://github.com/Templarian/MaterialDesign/blob/master/license.txt [github]: https://github.com/michaelbull/material-bottom-nav

material-bottom-nav

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Sick of boring JavaScript newsletters?

Downloads in past