{"id":28243753,"url":"https://github.com/bronsondunbar/library-navbar-component","last_synced_at":"2026-05-07T10:40:15.548Z","repository":{"id":126599250,"uuid":"137064048","full_name":"bronsondunbar/library-navbar-component","owner":"bronsondunbar","description":"Navbar component for React [NPM Package]","archived":false,"fork":false,"pushed_at":"2018-06-14T08:20:46.000Z","size":142,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-06-10T17:54:43.684Z","etag":null,"topics":["nodejs","nodemodule","react","reactcomponent"],"latest_commit_sha":null,"homepage":"https://bronsondunbar.com/navbar-component-for-react-npm-package/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bronsondunbar.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-06-12T11:48:53.000Z","updated_at":"2018-10-04T14:23:47.000Z","dependencies_parsed_at":"2023-06-17T09:30:31.897Z","dependency_job_id":null,"html_url":"https://github.com/bronsondunbar/library-navbar-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/bronsondunbar/library-navbar-component","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bronsondunbar%2Flibrary-navbar-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bronsondunbar%2Flibrary-navbar-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bronsondunbar%2Flibrary-navbar-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bronsondunbar%2Flibrary-navbar-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bronsondunbar","download_url":"https://codeload.github.com/bronsondunbar/library-navbar-component/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bronsondunbar%2Flibrary-navbar-component/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266586409,"owners_count":23952172,"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-07-22T02:00:09.085Z","response_time":66,"last_error":null,"robots_txt_status":null,"robots_txt_updated_at":null,"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":["nodejs","nodemodule","react","reactcomponent"],"created_at":"2025-05-19T07:07:58.196Z","updated_at":"2026-05-07T10:40:15.520Z","avatar_url":"https://github.com/bronsondunbar.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Navbar Component\n\nNavbar component for React\n\nInstall and save component as a dependency\n\n```\nnpm install --save library-navbar-component\n\n```\n\nImport component into your app\n\n```\n\nimport Navbar from 'library-navbar-component'\n\n```\n\nCreate an array of objects with the keys being name, route and items\n\n```\n\nconst navBarData = [\n\t{\n\t\tname: \"Navbar\",\n\t\troute: \"/\",\n\t\titems: [\n\t\t\t{\n\t\t\t\tname: \"Item 1\",\n\t\t\t\troute: \"/\",\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: \"Sub item 1\",\n\t\t\t\t\t\troute: \"/\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Item 2\",\n\t\t\t\troute: \"/\"\n\t\t\t},\n\t\t\t{\n\t\t\t\tname: \"Item 3\",\n\t\t\t\troute: \"/\",\n\t\t\t\titems: [\n\t\t\t\t\t{\n\t\t\t\t\t\tname: \"Sub item 3\",\n\t\t\t\t\t\troute: \"/\"\n\t\t\t\t\t}\n\t\t\t\t]\n\t\t\t},\n\t\t]\n\t},\n]\n\n```\n\n\nCreate and assign navbar content state with a false value\n\n```\n\nconstructor(props) {\n\tsuper(props)\n\n\tthis.state = {\n\t\tnavBarContent: false\n\t}\n}\n\n```\n\nCreate the function that will show navbar options\n\n```\n\nshowNavBarOptions (event) {\n\tvar elems = document.querySelectorAll(\".nav-item \u003e .dropdown-menu\");\n\n\t[].forEach.call(elems, function(el) {\n\t    el.classList.remove(\"show\")\n\t})\n\n\tlet hasOptions = event.target.nextSibling.childNodes.length\n\n\tif (hasOptions \u003e 0) {\n\t\tevent.target.nextSibling.classList.toggle(\"show\")\n\t}\n}\n\n```\n\nCreate the function that will hide navbar options\n\n```\n\nhideNavBarOptions (event) {\n\tvar elems = document.querySelectorAll(\".nav-item \u003e .dropdown-menu\");\n\n\t[].forEach.call(elems, function(el) {\n\t    el.classList.remove(\"show\")\n\t})\n}\n\n```\n\nCreate the function that will show navbar content\n\n```\n\nshowNavBarContent (event) {\n\tevent.preventDefault()\n\n\tthis.setState({\n    navBarContent: !this.state.navBarContent\n  })\n}\n\n```\n\nCreate the function that will hide navbar content\n\n```\n\nhideNavBarContent (event) {\n\tevent.preventDefault()\n\n\tthis.setState({\n    navBarContent: !this.state.navBarContent\n  })\n}\n\n```\n\n\nRender the component with the functions we created as well as any other props that are needed\n\n```\n\nrender () {\n\tconst navBarData = [\n\t\t{\n\t\t\tname: \"Navbar\",\n\t\t\troute: \"/\",\n\t\t\titems: [\n\t\t\t\t{\n\t\t\t\t\tname: \"Item 1\",\n\t\t\t\t\troute: \"/\",\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Sub item 1\",\n\t\t\t\t\t\t\troute: \"/\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Item 2\",\n\t\t\t\t\troute: \"/\"\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tname: \"Item 3\",\n\t\t\t\t\troute: \"/\",\n\t\t\t\t\titems: [\n\t\t\t\t\t\t{\n\t\t\t\t\t\t\tname: \"Sub item 3\",\n\t\t\t\t\t\t\troute: \"/\"\n\t\t\t\t\t\t}\n\t\t\t\t\t]\n\t\t\t\t},\n\t\t\t]\n\t\t},\n\t]\n\n\treturn (\n\t\t\u003cNavbarComponent\n\t\t\tnavBarData={navBarData}\n\t\t\tnavBarTheme=\"light\"\n\t\t\tnavBarContent={this.state.navBarContent}\n\t\t\tshowNavBarContent={this.showNavBarContent.bind(this)}\n\t\t\thideNavBarContent={this.hideNavBarContent.bind(this)}\n\t\t\tshowNavBarOptions={this.showNavBarOptions.bind(this)}\n\t\t\thideNavBarOptions={this.hideNavBarOptions.bind(this)}  /\u003e\n\t)\n}\n\n```\n\n| Prop              | Values                     |\n| :---------------- | :------------------------- |\n| navBarData        | Object                     |\n| navBarBrand       | Image                      |\n| navBarTheme       | light or dark              |\n| navBarContent     | navBarContent state        |\n| showNavBarContent | showNavBarContent function |\n| hideNavBarContent | hideNavBarContent function |\n| showNavBarOptions | showNavBarOptions function |\n| hideNavBarOptions | hideNavBarOptions function |\n\n* Font Awesome needs to included in project","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbronsondunbar%2Flibrary-navbar-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbronsondunbar%2Flibrary-navbar-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbronsondunbar%2Flibrary-navbar-component/lists"}