Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/michaelbull/material-bottom-nav
A bottom navigation bar adhering to the Material Design specification.
https://github.com/michaelbull/material-bottom-nav
bar bottom bottom-nav design material menu nav navigation tab ui
Last synced: 7 days ago
JSON representation
A bottom navigation bar adhering to the Material Design specification.
- Host: GitHub
- URL: https://github.com/michaelbull/material-bottom-nav
- Owner: michaelbull
- License: isc
- Created: 2017-02-07T01:41:59.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2021-12-28T19:29:48.000Z (about 3 years ago)
- Last Synced: 2024-04-28T19:44:42.720Z (9 months ago)
- Topics: bar, bottom, bottom-nav, design, material, menu, nav, navigation, tab, ui
- Language: SCSS
- Homepage: https://michaelbull.github.io/material-bottom-nav/
- Size: 1010 KB
- Stars: 45
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 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].
[](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
```
[](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
```
[](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
```
[](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