{"id":13494131,"url":"https://github.com/abhijithvijayan/react-minimal-side-navigation","last_synced_at":"2025-05-08T21:25:30.502Z","repository":{"id":54741027,"uuid":"308284534","full_name":"abhijithvijayan/react-minimal-side-navigation","owner":"abhijithvijayan","description":"Minimal side navigation component for React","archived":false,"fork":false,"pushed_at":"2023-11-21T11:08:26.000Z","size":106,"stargazers_count":66,"open_issues_count":12,"forks_count":29,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-02-02T03:51:23.968Z","etag":null,"topics":["react","side-navigation"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-minimal-side-navigation-example-y299d?file=/src/components/NavSidebar.jsx","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/abhijithvijayan.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null},"funding":{"github":["abhijithvijayan"],"patreon":"abhijithvijayan","open_collective":"abhijithvijayan","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":"abhijithvijayan","otechie":null,"custom":["https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan"]}},"created_at":"2020-10-29T09:52:31.000Z","updated_at":"2025-01-04T02:36:17.000Z","dependencies_parsed_at":"2024-01-08T07:59:58.911Z","dependency_job_id":"8e7497bb-2a01-4b8e-bc92-63bef6d30ab0","html_url":"https://github.com/abhijithvijayan/react-minimal-side-navigation","commit_stats":{"total_commits":59,"total_committers":2,"mean_commits":29.5,"dds":0.03389830508474578,"last_synced_commit":"e33a86dd38bdcb6957fb4fad062e72a92f55458c"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Freact-minimal-side-navigation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Freact-minimal-side-navigation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Freact-minimal-side-navigation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/abhijithvijayan%2Freact-minimal-side-navigation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/abhijithvijayan","download_url":"https://codeload.github.com/abhijithvijayan/react-minimal-side-navigation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238044095,"owners_count":19407128,"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","side-navigation"],"created_at":"2024-07-31T19:01:22.171Z","updated_at":"2025-02-10T02:09:33.537Z","avatar_url":"https://github.com/abhijithvijayan.png","language":"TypeScript","funding_links":["https://github.com/sponsors/abhijithvijayan","https://patreon.com/abhijithvijayan","https://opencollective.com/abhijithvijayan","https://issuehunt.io/r/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan","https://www.paypal.me/iamabhijithvijayan","https://www.patreon.com/abhijithvijayan","https://www.buymeacoffee.com/abhijithvijayan'"],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003ereact-minimal-side-navigation\u003c/h1\u003e\n\u003cp align=\"center\"\u003e  \u003c/p\u003e\n\u003cdiv align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-minimal-side-navigation\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/react-minimal-side-navigation\" alt=\"NPM\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://travis-ci.com/abhijithvijayan/react-minimal-side-navigation\"\u003e\n    \u003cimg src=\"https://travis-ci.com/abhijithvijayan/react-minimal-side-navigation.svg?branch=main\" alt=\"Travis Build\" /\u003e\n  \u003c/a\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://david-dm.org/abhijithvijayan/react-minimal-side-navigation\"\u003e\n    \u003cimg src=\"https://img.shields.io/david/abhijithvijayan/react-minimal-side-navigation.svg?colorB=orange\" alt=\"DEPENDENCIES\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/abhijithvijayan/react-minimal-side-navigation/blob/main/license\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/license/abhijithvijayan/react-minimal-side-navigation.svg\" alt=\"LICENSE\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://twitter.com/intent/tweet?text=Check%20out%20react-minimal-side-navigation%21%20by%20%40_abhijithv%0A%0AMinimal%20side%20navigation%20component%20for%20React%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Freact-minimal-side-navigation%0A%0A%23react%20%23sidenavigation%20%23library%20%23javascript%20%23typescript\"\u003e\n     \u003cimg src=\"https://img.shields.io/twitter/url/http/shields.io.svg?style=social\" alt=\"TWEET\" /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\u003ch3 align=\"center\"\u003e🙋‍♂️ Made by \u003ca href=\"https://twitter.com/_abhijithv\"\u003e@abhijithvijayan\u003c/a\u003e\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  Donate:\n  \u003ca href=\"https://www.paypal.me/iamabhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePayPal\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e,\n  \u003ca href=\"https://www.patreon.com/abhijithvijayan\" target='_blank'\u003e\u003ci\u003e\u003cb\u003ePatreon\u003c/b\u003e\u003c/i\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href='https://www.buymeacoffee.com/abhijithvijayan' target='_blank'\u003e\n    \u003cimg height='36' style='border:0px;height:36px;' src='https://bmc-cdn.nyc3.digitaloceanspaces.com/BMC-button-images/custom_images/orange_img.png' border='0' alt='Buy Me a Coffee' /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003chr /\u003e\n\n❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/react-minimal-side-navigation/stargazers) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20react-minimal-side-navigation%21%20by%20%40_abhijithv%0A%0AMinimal%20side%20navigation%20component%20for%20React%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Freact-minimal-side-navigation%0A%0A%23react%20%23sidenavigation%20%23library%20%23javascript%20%23typescript) about it.\n\n\u003cimg src=\".github/screenshot.png\" width=\"300\" /\u003e\n\n## Table of Contents\n\n- [Demo](#demo)\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n- [Issues](#issues)\n  - [🐛 Bugs](#-bugs)\n- [LICENSE](#license)\n\n## Demo\n\n\u003e https://codesandbox.io/s/react-minimal-side-navigation-example-y299d\n\n## Installation\n\nEnsure you have [Node.js](https://nodejs.org) 10 or later installed. Then run the following:\n\n```\n# via npm\nnpm install react-minimal-side-navigation\n\n# or yarn\nyarn add react-minimal-side-navigation\n```\n\n## Usage\n\n```js\nimport React from 'react';\n\nimport {Navigation} from 'react-minimal-side-navigation';\nimport 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';\n\nfunction App() {\n    return (\n      \u003c\u003e\n        \u003cNavigation\n            // you can use your own router's api to get pathname\n            activeItemId=\"/management/members\"\n            onSelect={({itemId}) =\u003e {\n              // maybe push to the route\n            }}\n            items={[\n              {\n                title: 'Dashboard',\n                itemId: '/dashboard',\n                // you can use your own custom Icon component as well\n                // icon is optional\n                elemBefore: () =\u003e \u003cIcon name=\"inbox\" /\u003e,\n              },\n              {\n                title: 'Management',\n                itemId: '/management',\n                elemBefore: () =\u003e \u003cIcon name=\"users\" /\u003e,\n                subNav: [\n                  {\n                    title: 'Projects',\n                    itemId: '/management/projects',\n                    // Requires v1.9.1+ (https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/13)\n                    elemBefore: () =\u003e \u003cIcon name=\"cloud-snow\" /\u003e,\n                  },\n                  {\n                    title: 'Members',\n                    itemId: '/management/members',\n                    elemBefore: () =\u003e \u003cIcon name=\"coffee\" /\u003e,\n                  },\n                ],\n              },\n              {\n                title: 'Another Item',\n                itemId: '/another',\n                subNav: [\n                  {\n                    title: 'Teams',\n                    itemId: '/management/teams',\n                  },\n                ],\n              },\n            ]}\n          /\u003e\n      \u003c/\u003e\n    );\n}\n\n```\n\n## API\n\n#### items\n\nType: `array`\n\nNavigation items to render.\n\n#### activeItemId\n\nType: `string`\n\nCurrently selected item id.\n\n#### onSelect\n\nType: `function`\n\nCalled when item is clicked.\n\n## Issues\n\n_Looking to contribute? Look for the [Good First Issue](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)\nlabel._\n\n### 🐛 Bugs\n\nPlease file an issue [here](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/new) for bugs, missing documentation, or unexpected behavior.\n\n[**See Bugs**](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22type%3A+bug%22)\n\n### Linting \u0026 TypeScript Config\n\n- Shared Eslint \u0026 Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)\n- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)\n\n## License\n\nMIT © [Abhijith Vijayan](https://abhijithvijayan.in)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Freact-minimal-side-navigation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fabhijithvijayan%2Freact-minimal-side-navigation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fabhijithvijayan%2Freact-minimal-side-navigation/lists"}