{"id":26496695,"url":"https://github.com/bigyusuf/menu-lib","last_synced_at":"2026-04-08T18:32:11.055Z","repository":{"id":39412580,"uuid":"506941496","full_name":"BigYusuf/menu-lib","owner":"BigYusuf","description":"reusable awesome navbar menu ","archived":false,"fork":false,"pushed_at":"2022-07-08T19:55:10.000Z","size":1062,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-20T07:38:34.432Z","etag":null,"topics":["circleci","circleci-orbs","coverage-report","coveralls","jest","react","react-hooks","reactjs","unit-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BigYusuf.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-24T08:50:57.000Z","updated_at":"2023-11-01T18:42:09.000Z","dependencies_parsed_at":"2022-07-12T17:55:01.077Z","dependency_job_id":null,"html_url":"https://github.com/BigYusuf/menu-lib","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fmenu-lib","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fmenu-lib/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fmenu-lib/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BigYusuf%2Fmenu-lib/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BigYusuf","download_url":"https://codeload.github.com/BigYusuf/menu-lib/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244609956,"owners_count":20480884,"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","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":["circleci","circleci-orbs","coverage-report","coveralls","jest","react","react-hooks","reactjs","unit-testing"],"created_at":"2025-03-20T12:23:15.008Z","updated_at":"2025-12-31T00:05:25.582Z","avatar_url":"https://github.com/BigYusuf.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-navbar-menu\n\n---\n\nPowered by BigYusufff. Check some of my awesome projects out https://yusuflateef.vercel.app/\n\n[![NPM version][npm-image]][npm-url] [![dumi](https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square)](https://github.com/BigYusuf/menu-lib) [![build status][github-actions-image]][github-actions-url] [![Coverage Status][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]\n\n[npm-image]: http://img.shields.io/npm/v/react-navbar-menu.svg?style=flat-square\n[npm-url]: http://npmjs.org/package/react-navbar-menu\n[github-actions-image]: https://github.com/BigYusuf/menu-lib/workflows/CI/badge.svg\n[github-actions-url]: https://github.com/BigYusuf/menu-lib/actions\n[circleci-image]: https://img.shields.io/circleci/BigYusuf/menu-lib/master?style=flat-square\n[coveralls-image]: https://coveralls.io/repos/github/BigYusuf/menu-lib/badge.svg?branch=master\n\n[coveralls-url]: (https://coveralls.io/github/BigYusuf/menu-lib?branch=master)\n[download-image]: https://img.shields.io/npm/dm/react-navbar-menu.svg?style=flat-square\n[download-url]: https://npmjs.org/package/react-navbar-menu\n[bundlephobia-url]: https://bundlephobia.com/result?p=react-navbar-menu\n[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-navbar-menu\n\n## Install\n\n[![react-navbar-menu](https://nodei.co/npm/react-navbar-menu.png)](https://npmjs.org/package/react-navbar-menu)\n\n## Usage\n\n### With linear-gradient\n\n```js\nimport React from 'react'\nimport { Navbar } from 'react-navbar-menu'\n\nconst Header = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cNavbar IconColor={'yellow'} MenuNumber={4} Center={true} Position={'bottom'}\n                url1={'#home'}icon1={\"bx bx-home-alt\"} \n                url2={'#aboutme'}icon2={\"bx bx-book-alt\"} \n                url3={'/contact'}icon3={\"bx bx-user\"} \n                url4={'#skills'}icon4={\"bx bx-pin\"} \n                backgroundColor={\"#151c28\"} degree={`to bottom`} \n                gradcolor1={'#a595e9'} gradcolor2={'#a595e933'}/\u003e\n   \n        \u003c/div\u003e\n    )\n}\n\nexport default Header\n```\n\n### Without linear-gradient (with ActiveColor)\n\n```js\nimport React from 'react'\nimport { Navbar } from 'react-navbar-menu'\n\nconst Header = () =\u003e {\n    return (\n        \u003cdiv\u003e\n            \u003cNavbar IconColor={'yellow'} MenuNumber={4} Position={'bottom'}\n                url1={'#home'}icon1={\"bx bx-home-alt\"} Center={true} \n                url2={'#aboutme'}icon2={\"bx bx-book-alt\"} \n                url3={'/contact'}icon3={\"bx bx-user\"} \n                url4={'#skills'}icon4={\"bx bx-pin\"} \n                backgroundColor={\"#151c28\"} activeColor={'#a595e9'} /\u003e\n   \n        \u003c/div\u003e\n    )\n}\n\nexport default Header\n```\n\n## Compatibility\n\n| [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png\" alt=\"IE / Edge\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eIE / Edge | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png\" alt=\"Firefox\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eFirefox | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png\" alt=\"Chrome\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eChrome | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png\" alt=\"Safari\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eSafari | [\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png\" alt=\"Electron\" width=\"24px\" height=\"24px\" /\u003e](http://godban.github.io/browsers-support-badges/)\u003cbr\u003eElectron |\n| --- | --- | --- | --- | --- |\n| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |\n\n### General Props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ePosition\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"Top\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the position of the component. \"Top\" or \"top\" or \"Bottom\"\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eCenter\u003c/td\u003e\n            \u003ctd\u003eBoolean\u003c/td\u003e\n            \u003cth\u003efalse\u003c/th\u003e\n            \u003ctd\u003eChoose to center the compenent true or false\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eborderRadius\u003c/td\u003e\n            \u003ctd\u003eNumber\u003c/td\u003e\n            \u003cth\u003e64\u003c/th\u003e\n            \u003ctd\u003e{Optional} Specify the border-radius\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eWidth\u003c/td\u003e\n            \u003ctd\u003eNumber\u003c/td\u003e\n            \u003cth\u003e\u003c/th\u003e\n            \u003ctd\u003e{Optional} Specify the width of component\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003ebackgroundColor\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the background color for the menu/ navbar menu e.g. \"blue\",\"#a595e9\"\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### Menu Items Props\n\n\u003ctable class=\"table table-bordered table-striped\"\u003e\n    \u003cthead\u003e\n    \u003ctr\u003e\n        \u003cth style=\"width: 100px;\"\u003ename\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003etype\u003c/th\u003e\n        \u003cth style=\"width: 50px;\"\u003edefault\u003c/th\u003e\n        \u003cth\u003edescription\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003c/thead\u003e\n    \u003ctbody\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eMenuNumber\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003eThe MenuNumber denotes 'how many menu-items you want. Although Maximum is 5 and minimum is 1'\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n          \u003ctd\u003eFont\u003c/td\u003e\n          \u003ctd\u003eNumber\u003c/td\u003e\n          \u003ctd\u003e\u003c/td\u003e\n          \u003ctd\u003e{optional}Specify the font-size. As the icons increase and decrease, Height will adjust automatically but Width will need to be adjusted maually\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eIconColor\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the color for the menu items/ navbar menu items e.g. \"blue\",\"#a595e9\"\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eactiveColor\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the background color for the active menu items/ navbar menu items e.g. \"blue\",\"#a595e9\"\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eactiveIconColor\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the color for the menu item/ navbar menu item e.g. \"blue\",\"#a595e9\"\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003edegree\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003e{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. \"to left\", \"to right\", \"to bottom left\" etc.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003egradcolor1\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003e{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. \"blue\" etc.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003egradcolor2\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003e{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. \"green\" etc.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eicon1, icon2... icon5\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the name of the icon for each specific icon number(icon1, icon2) for the menu item/ navbar menu items. e.g. \"bx bx-home\", \"fa fa-house\" etc.\u003c/td\u003e\n        \u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eurl1, url2... url5\u003c/td\u003e\n            \u003ctd\u003eString\u003c/td\u003e\n            \u003cth\u003e\"\"\u003c/th\u003e\n            \u003ctd\u003eSpecify the name of the url for each specific url number(url1, url2) for the menu item/ navbar menu items. e.g. \"/\", \"#contact\" etc.\u003c/td\u003e\n        \u003c/tr\u003e\n    \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Installation\n\n```npm\n  npm install react-navbar-menu\n```\n\n## Live Examples\n\nhttps://ri4w0d.csb.app/\n## More Info\n\nhttps://yusuflateefblog.vercel.app/post/react-navbar-menu\n\n## Code Installation\n\n```npm\n  npm install\n```\n\n## License\n\nreact-navbar-menu is released under the MIT license.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyusuf%2Fmenu-lib","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbigyusuf%2Fmenu-lib","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbigyusuf%2Fmenu-lib/lists"}