{"id":21237527,"url":"https://github.com/michaelbull/material-bottom-nav","last_synced_at":"2025-10-08T16:20:55.059Z","repository":{"id":57291929,"uuid":"81153142","full_name":"michaelbull/material-bottom-nav","owner":"michaelbull","description":"A bottom navigation bar adhering to the Material Design specification.","archived":false,"fork":false,"pushed_at":"2021-12-28T19:29:48.000Z","size":1036,"stargazers_count":45,"open_issues_count":0,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-09-07T06:41:37.145Z","etag":null,"topics":["bar","bottom","bottom-nav","design","material","menu","nav","navigation","tab","ui"],"latest_commit_sha":null,"homepage":"https://michaelbull.github.io/material-bottom-nav/","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaelbull.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-02-07T01:41:59.000Z","updated_at":"2024-04-16T06:44:40.000Z","dependencies_parsed_at":"2022-08-27T12:20:37.820Z","dependency_job_id":null,"html_url":"https://github.com/michaelbull/material-bottom-nav","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"purl":"pkg:github/michaelbull/material-bottom-nav","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Fmaterial-bottom-nav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Fmaterial-bottom-nav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Fmaterial-bottom-nav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Fmaterial-bottom-nav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaelbull","download_url":"https://codeload.github.com/michaelbull/material-bottom-nav/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaelbull%2Fmaterial-bottom-nav/sbom","scorecard":{"id":641003,"data":{"date":"2025-08-11","repo":{"name":"github.com/michaelbull/material-bottom-nav","commit":"12b3bc1cd7d7e29dbd8b473c4b55c1c5a1150130"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: ISC License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/ci.yaml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Pinned-Dependencies","score":3,"reason":"dependency not pinned by hash detected -- score normalized to 3","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/michaelbull/material-bottom-nav/ci.yaml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yaml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/michaelbull/material-bottom-nav/ci.yaml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned","Info:   1 out of   1 npmCommand dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"49 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25","Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc","Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27","Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh","Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42","Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22","Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-qrpm-p2h7-hrv2","Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55","Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5","Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp","Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq","Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr","Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765","Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g","Warn: Project is vulnerable to: GHSA-76c9-3jph-rj3q","Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j","Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-926x-m6m5-3mmp","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg","Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5","Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j","Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986","Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6","Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v","Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-21T10:44:49.638Z","repository_id":57291929,"created_at":"2025-08-21T10:44:49.638Z","updated_at":"2025-08-21T10:44:49.638Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278974684,"owners_count":26078463,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-08T02:00:06.501Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bar","bottom","bottom-nav","design","material","menu","nav","navigation","tab","ui"],"created_at":"2024-11-21T00:19:14.147Z","updated_at":"2025-10-08T16:20:55.041Z","avatar_url":"https://github.com/michaelbull.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# material-bottom-nav\n\n[![CI Status][ci-badge]][ci]\n[![License][license-badge]][license]\n[![npm version][npm-badge]][npm]\n[![npm downloads][downloads-badge]][downloads]\n[![dependencies status][dependencies-badge]][dependencies]\n[![devDependencies status][devDependencies-badge]][devDependencies]\n[![peerDependencies status][peerDependencies-badge]][peerDependencies]\n\nA bottom navigation bar adhering to the [Material Design specification][spec].\nIt is written purely using [Sass][sass] mixins which allow you to apply the\nstyle rules to any class, as shown in the [demo page's stylesheet][demo.scss].\n\nA running demonstration can be found [here][demo].\n\n[![Three destinations](/img/index.png)](https://michaelbull.github.io/material-bottom-nav/)\n\n\u003cbr /\u003e\n\n## Installation\n\nInstall the package via npm:\n\n```\nnpm install --save material-bottom-nav\n```\n\n## Usage\n\nApply the mixin to a class:\n\n```scss\n@use '~material-bottom-nav' as bottom-nav;\n\n.bottom-nav {\n  @include bottom-nav.root(\n    $background-color: #009688,\n    $active-color: #FFFFFF,\n    $inactive-color: #E0E0E0\n  );\n}\n```\n\nStructure your template:\n\n```html\n\u003cnav class=\"bottom-nav\"\u003e\n  \u003ca class=\"bottom-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"bottom-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M11,7V12.11L15.71,14.9L16.5,13.62L12.5,11.25V7M12.5,2C8.97,2 5.91,3.92 4.27,6.77L2,4.5V11H8.5L5.75,8.25C6.96,5.73 9.5,4 12.5,4A7.5,7.5 0 0,1 20,11.5A7.5,7.5 0 0,1 12.5,19C9.23,19 6.47,16.91 5.44,14H3.34C4.44,18.03 8.11,21 12.5,21C17.74,21 22,16.75 22,11.5A9.5,9.5 0 0,0 12.5,2Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"bottom-nav__label\"\u003eRecents\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"bottom-nav__destination bottom-nav__destination--active\" href=\"#\"\u003e\n    \u003csvg class=\"bottom-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"bottom-nav__label\"\u003eFavorites\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"bottom-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"bottom-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,12.5A1.5,1.5 0 0,1 10.5,11A1.5,1.5 0 0,1 12,9.5A1.5,1.5 0 0,1 13.5,11A1.5,1.5 0 0,1 12,12.5M12,7.2C9.9,7.2 8.2,8.9 8.2,11C8.2,14 12,17.5 12,17.5C12,17.5 15.8,14 15.8,11C15.8,8.9 14.1,7.2 12,7.2Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"bottom-nav__label\"\u003eNearby\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/nav\u003e\n```\n\n## Hiding inactive labels\n\nThe `$hide-inactive-labels` argument defaults to `false`. It is used to hide the\ntext label of any inactive destinations as described in the\n[anatomy][spec-anatomy] section of the official spec.\n\n[**Demo**](https://michaelbull.github.io/material-bottom-nav/hidden-labels.html)\n\n\u003cdetails\u003e\n\u003csummary\u003eStyle\u003c/summary\u003e\n\u003cp\u003e\n\n```scss\n@use '~material-bottom-nav' as bottom-nav;\n\n.hidden-labels-nav {\n  @include bottom-nav.root(\n    $background-color: #009688,\n    $active-color: #FFFFFF,\n    $inactive-color: #E0E0E0,\n    $hide-inactive-labels: true\n  );\n}\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTemplate\u003c/summary\u003e\n\u003cp\u003e\n\n```html\n\u003cnav class=\"hidden-labels-nav\"\u003e\n  \u003ca class=\"hidden-labels-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"hidden-labels-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"hidden-labels-nav__label\"\u003eMovies \u0026amp; TV\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"hidden-labels-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"hidden-labels-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12,3V12.26C11.5,12.09 11,12 10.5,12C8,12 6,14 6,16.5C6,19 8,21 10.5,21C13,21 15,19 15,16.5V6H19V3H12Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"hidden-labels-nav__label\"\u003eMusic\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"hidden-labels-nav__destination hidden-labels-nav__destination--active\" href=\"#\"\u003e\n    \u003csvg class=\"hidden-labels-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M18,22A2,2 0 0,0 20,20V4C20,2.89 19.1,2 18,2H12V9L9.5,7.5L7,9V2H6A2,2 0 0,0 4,4V20A2,2 0 0,0 6,22H18Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"hidden-labels-nav__label\"\u003eBooks\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"hidden-labels-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"hidden-labels-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"hidden-labels-nav__label\"\u003eNewsstand\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"hidden-labels-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"hidden-labels-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M7,6H17A6,6 0 0,1 23,12A6,6 0 0,1 17,18C15.22,18 13.63,17.23 12.53,16H11.47C10.37,17.23 8.78,18 7,18A6,6 0 0,1 1,12A6,6 0 0,1 7,6M6,9V11H4V13H6V15H8V13H10V11H8V9H6M15.5,12A1.5,1.5 0 0,0 14,13.5A1.5,1.5 0 0,0 15.5,15A1.5,1.5 0 0,0 17,13.5A1.5,1.5 0 0,0 15.5,12M18.5,9A1.5,1.5 0 0,0 17,10.5A1.5,1.5 0 0,0 18.5,12A1.5,1.5 0 0,0 20,10.5A1.5,1.5 0 0,0 18.5,9Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"hidden-labels-nav__label\"\u003eGames\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/nav\u003e\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n[![Hidden labels](/img/hidden-labels.png)](https://michaelbull.github.io/material-bottom-nav/hidden-labels.html)\n\n\u003cbr /\u003e\n\n## Badges\n\nBottom navigation icons can include badges in their upper right corner. These\nbadges can contain dynamic information, such as a number of pending requests.\n\n[**Demo**](https://michaelbull.github.io/material-bottom-nav/badges.html)\n\n\u003cdetails\u003e\n\u003csummary\u003eStyle\u003c/summary\u003e\n\u003cp\u003e\n\n```scss\n@use '~material-bottom-nav' as bottom-nav;\n\n.badges-nav {\n  @include bottom-nav.root(\n    $background-color: white,\n    $active-color: #6200EE,\n    $inactive-color: #757575,\n    $hide-inactive-labels: true\n  );\n}\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTemplate\u003c/summary\u003e\n\u003cp\u003e\n\n```html\n\u003cnav class=\"badges-nav\"\u003e\n  \u003ca class=\"badges-nav__destination badges-nav__destination--active\" href=\"#\"\u003e\n    \u003csvg class=\"badges-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"badges-nav__label\"\u003eItem One Max\u003c/span\u003e\n    \u003cspan class=\"badges-nav__badge\"\u003e\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"badges-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"badges-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z\" /\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"badges-nav__label\"\u003eItem Two\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"badges-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"badges-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M13,12H20V13.5H13M13,9.5H20V11H13M13,14.5H20V16H13M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M21,19H12V6H21\" /\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"badges-nav__label\"\u003eItem Three\u003c/span\u003e\n    \u003cspan class=\"badges-nav__badge\"\u003e88\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"badges-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"badges-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z\" /\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"badges-nav__label\"\u003eItem Four\u003c/span\u003e\n    \u003cspan class=\"badges-nav__badge\"\u003e888+\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/nav\u003e\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n[![Badges](/img/badges.png)](https://michaelbull.github.io/material-bottom-nav/badges.html)\n\n\u003cbr /\u003e\n\n## Horizontal\n\nOn mobile (in landscape mode) or tablet, bottom navigation destinations can be\npositioned horizontally instead of stacked.\n\n[**Demo**](https://michaelbull.github.io/material-bottom-nav/horizontal.html)\n\n\u003cdetails\u003e\n\u003csummary\u003eStyle\u003c/summary\u003e\n\u003cp\u003e\n\n```scss\n@use '~material-bottom-nav' as bottom-nav;\n\n.horizontal-nav {\n  @include bottom-nav.root(\n    $background-color: #6200EE,\n    $active-color: white,\n    $inactive-color: #BB86FC\n  );\n\n  @include bottom-nav.horizontal();\n}\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n\u003cdetails\u003e\n\u003csummary\u003eTemplate\u003c/summary\u003e\n\u003cp\u003e\n\n```html\n\u003cnav class=\"horizontal-nav\"\u003e\n  \u003ca class=\"horizontal-nav__destination horizontal-nav__destination--active\" href=\"#\"\u003e\n    \u003csvg class=\"horizontal-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z\"\u003e\u003c/path\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"horizontal-nav__label\"\u003eFavorites\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"horizontal-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"horizontal-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M12 3V13.55C11.41 13.21 10.73 13 10 13C7.79 13 6 14.79 6 17S7.79 21 10 21 14 19.21 14 17V7H18V3H12Z\" /\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"horizontal-nav__label\"\u003eMusic\u003c/span\u003e\n  \u003c/a\u003e\n\n  \u003ca class=\"horizontal-nav__destination\" href=\"#\"\u003e\n    \u003csvg class=\"horizontal-nav__icon\" viewBox=\"0 0 24 24\"\u003e\n      \u003cpath d=\"M13,12H20V13.5H13M13,9.5H20V11H13M13,14.5H20V16H13M21,4H3A2,2 0 0,0 1,6V19A2,2 0 0,0 3,21H21A2,2 0 0,0 23,19V6A2,2 0 0,0 21,4M21,19H12V6H21\" /\u003e\n    \u003c/svg\u003e\n    \u003cspan class=\"horizontal-nav__label\"\u003eBooks\u003c/span\u003e\n  \u003c/a\u003e\n\u003c/nav\u003e\n```\n\u003c/p\u003e\n\u003c/details\u003e\n\n[![Horizontal](/img/horizontal.png)](https://michaelbull.github.io/material-bottom-nav/horizontal.html)\n\n\u003cbr /\u003e\n\n## Customization\n\nThe box-model and colors of the individual styles within this component can be configured by overriding the default\nvariable values defined in\n[`bottom-nav.scss`][mixin].\n\n```scss\n@use '~material-bottom-nav' as bottom-nav with (\n  $destination-horizontal-padding: 4px, // reduce the horizontal padding within each destination\n  $icon-font-size: 28px, // increase the icon size\n);\n\n.bottom-nav {\n  @include bottom-nav.root(#009688, #FFFFFF, #E0E0E0);\n}\n```\n\n## Contributing\n\nBug reports and pull requests are welcome on [GitHub][github].\n\n## License\n\nThis project is available under the terms of the ISC license. See the\n[`LICENSE`][license] file for the copyright information and licensing terms.\n\nExamples used include icons from the [Material Design Icons][material-icons]\nproject ([LICENSE][material-icons-license]).\n\n[ci-badge]: https://github.com/michaelbull/material-bottom-nav/workflows/ci/badge.svg\n[ci]: https://github.com/michaelbull/material-bottom-nav/actions?query=workflow%3Aci\n[license-badge]: https://img.shields.io/github/license/michaelbull/material-bottom-nav.svg\n[license]: https://github.com/michaelbull/material-bottom-nav/blob/master/LICENSE\n[npm-badge]: https://img.shields.io/npm/v/material-bottom-nav.svg\n[npm]: https://www.npmjs.com/package/material-bottom-nav\n[downloads-badge]: https://img.shields.io/npm/dt/material-bottom-nav.svg\n[downloads]: https://www.npmjs.com/package/material-bottom-nav\n[dependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav.svg\n[dependencies]: https://david-dm.org/michaelbull/material-bottom-nav\n[devDependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav/dev-status.svg\n[devDependencies]: https://david-dm.org/michaelbull/material-bottom-nav?type=dev\n[peerDependencies-badge]: https://david-dm.org/michaelbull/material-bottom-nav/peer-status.svg\n[peerDependencies]: https://david-dm.org/michaelbull/material-bottom-nav?type=peer\n[spec]: https://material.io/components/bottom-navigation\n[spec-anatomy]: https://material.io/components/bottom-navigation#anatomy\n[sass]: http://sass-lang.com/guide\n[demo.scss]: https://github.com/michaelbull/material-bottom-nav/blob/master/demo/index.scss#L72\n[demo]: https://michaelbull.github.io/material-bottom-nav/\n[mixin]: https://github.com/michaelbull/material-bottom-nav/blob/master/bottom-nav.scss#\n[svg]: https://developer.mozilla.org/en-US/docs/Web/SVG\n[material-icons]: https://materialdesignicons.com/\n[material-icons-license]: https://github.com/Templarian/MaterialDesign/blob/master/license.txt\n[github]: https://github.com/michaelbull/material-bottom-nav\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelbull%2Fmaterial-bottom-nav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaelbull%2Fmaterial-bottom-nav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaelbull%2Fmaterial-bottom-nav/lists"}