A bottom navigation bar adhering to the Material Design specification.
npm install 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].
Install the package via npm:
``
npm install --save material-bottom-nav
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
Nearby
`
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.
` .hidden-labels-nav {Style
scss
@use '~material-bottom-nav' as bottom-nav;
@include bottom-nav.root(
$background-color: #009688,
$active-color: #FFFFFF,
$inactive-color: #E0E0E0,
$hide-inactive-labels: true
);
}
`
Bottom navigation icons can include badges in their upper right corner. These
badges can contain dynamic information, such as a number of pending requests.
` .badges-nav {Style
scss
@use '~material-bottom-nav' as bottom-nav;
@include bottom-nav.root(
$background-color: white,
$active-color: #6200EE,
$inactive-color: #757575,
$hide-inactive-labels: true
);
}
`
On mobile (in landscape mode) or tablet, bottom navigation destinations can be
positioned horizontally instead of stacked.
` .horizontal-nav { @include bottom-nav.horizontal();Style
scss
@use '~material-bottom-nav' as bottom-nav;
@include bottom-nav.root(
$background-color: #6200EE,
$active-color: white,
$inactive-color: #BB86FC
);
}
`
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);
}
`
Bug reports and pull requests are welcome on [GitHub][github].
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