{"id":28268874,"url":"https://github.com/wmira/react-sidenav","last_synced_at":"2025-06-16T20:30:27.103Z","repository":{"id":25445768,"uuid":"28875714","full_name":"wmira/react-sidenav","owner":"wmira","description":"React based Sidebar Navigation","archived":false,"fork":false,"pushed_at":"2024-02-29T13:40:37.000Z","size":4464,"stargazers_count":339,"open_issues_count":55,"forks_count":63,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-05-27T02:50:57.177Z","etag":null,"topics":["react","sidemenu","sidenav","sidenavigation"],"latest_commit_sha":null,"homepage":"https://react-sidenav.now.sh","language":"TypeScript","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/wmira.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2015-01-06T17:56:38.000Z","updated_at":"2024-10-10T10:57:20.000Z","dependencies_parsed_at":"2024-02-29T14:43:57.631Z","dependency_job_id":"0896f1a8-909d-4080-8b4f-30c62c435018","html_url":"https://github.com/wmira/react-sidenav","commit_stats":{"total_commits":203,"total_committers":10,"mean_commits":20.3,"dds":0.07389162561576357,"last_synced_commit":"2a8aefc510bbb27142c9eb16010e636ac26031c6"},"previous_names":[],"tags_count":35,"template":false,"template_full_name":null,"purl":"pkg:github/wmira/react-sidenav","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmira%2Freact-sidenav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmira%2Freact-sidenav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmira%2Freact-sidenav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmira%2Freact-sidenav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wmira","download_url":"https://codeload.github.com/wmira/react-sidenav/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wmira%2Freact-sidenav/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":260232688,"owners_count":22978585,"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":["react","sidemenu","sidenav","sidenavigation"],"created_at":"2025-05-20T15:13:37.281Z","updated_at":"2025-06-16T20:30:27.089Z","avatar_url":"https://github.com/wmira.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-sidenav\n\n[![Build Status](https://gitlab.com/wmira/react-sidenav/badges/master/build.svg)](https://gitlab.com/wmira/react-sidenav/pipelines)\n[![coverage report](https://gitlab.com/wmira/react-sidenav/badges/master/coverage.svg)](https://gitlab.com/wmira/react-sidenav/commits/master)\n[![npm version](https://badge.fury.io/js/react-sidenav.svg)](https://badge.fury.io/js/react-sidenav)\n\nSide Navigation Component for React\n\n![Alt Img](https://github.com/wmira/react-sidenav/blob/master/sidenav.png)\n\n## Requirements\n\n**react-sidenav** are exported as an es module thus you would need a bundler to use it. It is also written in\nTypescript so it can be directly used with a typescript project as well.\n\n### Peer Dependencies\n\n**React 16.8**\n\n### NavContext \n\nAs the current version of react-sidenav does not have any fixed rendering template,\nthe user is free to render Nav items as they see fit. To render conditionally an item can get the context which contains \nthe following attributes:\n\n| property   |      type      |  description |\n|------------:|-------------:|------:|\n| selected | boolean  | if this Nav item is selected |\n| id | string  | the id of the Nav as per props.id |\n| pathId | string  | The path id, will be parentId|props.id if rendered with a parent |\n| level | number  | The level of the Nav, starts with 1 |\n| isLeaf | boolean  | If true, then this Nav has no children |\n\nBelow is an example on how to use it.\n\n```javascript\n    const Item = () =\u003e {\n      const context = React.useContext(NavContext);\n      return (\n        \u003cdiv style={{ color: context.selected? 'pink': 'inherit'}}\u003e{ props.children }\u003c/div\u003e\n      )\n    }\n  \n    \u003cSideNav\u003e\n      \u003cNav id=\"1\"\u003e\n        \u003cItem\u003eLink 1\u003c/Item\u003e\n      \u003c/Nav\u003e\n      \u003cNav id=\"2\"\u003e\n        \u003cItem\u003eLink 2\u003c/Item\u003e\n      \u003c/Nav\u003e\n      \u003cNav id=\"3\"\u003e\n        \u003cItem\u003eLink 3\u003c/Item\u003e\n      \u003c/Nav\u003e\n    \u003c/SideNav\u003e\n  \n\n```\n### SideNav Properties\n\n| property   |      type      |  description |  isRequired |\n|------------|-------------:|------:|-----------------------|\n| onSelection | function: ({id, path, payload}) =\u003e void | a function that gets called when a navigation has been clicked | false |\n| defaultSelectedPath | string | the default selection | false |\n| mode | compact, normal | changes rendering style of children | false, defaults to normal |\n| childrenToggleMode | hover, click | changes how children are expanded | false, defaults to hover |\n| childrenToggleIndicator | React Component | the toggle indicator to render. The collapse, expand state is passed or you can use the NavGroupContext to get the collapse/expand state | false |\n\n\n### Nav Properties\n\n| property   |      type      |  description |  isRequired |\n|------------|-------------:|------:|-----------------------|\n| id | | a function that gets called when a navigation has been clicked | true |\n| payload | any | passed to the listener when this nav is clicked  | false |\n\n\n# Development\n\nPlease checkout example on CodeSandbox and the src/playground directory for now while\nall the documentation/testing is being completed.\n\n# Sponsors\n[![JetBrains](https://github.com/wmira/react-sidenav/raw/master/jetbrains.png)](https://www.jetbrains.com/?from=react-sidenav)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwmira%2Freact-sidenav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwmira%2Freact-sidenav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwmira%2Freact-sidenav/lists"}