{"id":13755493,"url":"https://github.com/trendmicro-frontend/react-sidenav","last_synced_at":"2025-05-16T10:08:43.268Z","repository":{"id":48643779,"uuid":"113555699","full_name":"trendmicro-frontend/react-sidenav","owner":"trendmicro-frontend","description":"React SideNav component","archived":false,"fork":false,"pushed_at":"2023-09-22T14:12:30.000Z","size":1356,"stargazers_count":348,"open_issues_count":43,"forks_count":102,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-05-11T20:02:24.606Z","etag":null,"topics":["navigation","react","side","sidenav"],"latest_commit_sha":null,"homepage":"https://trendmicro-frontend.github.io/react-sidenav/","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/trendmicro-frontend.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,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-12-08T09:16:36.000Z","updated_at":"2025-01-05T00:13:05.000Z","dependencies_parsed_at":"2024-01-17T15:04:26.273Z","dependency_job_id":"e0897ff0-b5fa-43fa-9e8c-6c33fac9fe51","html_url":"https://github.com/trendmicro-frontend/react-sidenav","commit_stats":null,"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-sidenav","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-sidenav/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-sidenav/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/trendmicro-frontend%2Freact-sidenav/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/trendmicro-frontend","download_url":"https://codeload.github.com/trendmicro-frontend/react-sidenav/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254509478,"owners_count":22082892,"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":["navigation","react","side","sidenav"],"created_at":"2024-08-03T10:00:55.233Z","updated_at":"2025-05-16T10:08:38.258Z","avatar_url":"https://github.com/trendmicro-frontend.png","language":"JavaScript","funding_links":[],"categories":["Trend Micro","JavaScript"],"sub_categories":["React Components"],"readme":"# react-sidenav [![build status](https://travis-ci.org/trendmicro-frontend/react-sidenav.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-sidenav) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-sidenav/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-sidenav?branch=master)\n\n[![NPM](https://nodei.co/npm/@trendmicro/react-sidenav.png?downloads=true\u0026stars=true)](https://nodei.co/npm/@trendmicro/react-sidenav/)\n\nReact SideNav\n\nDemo: https://trendmicro-frontend.github.io/react-sidenav\n\n## Installation\n\n1. Install the latest version of [react](https://github.com/facebook/react) and [react-sidenav](https://github.com/trendmicro-frontend/react-sidenav):\n\n  ```\n  npm install --save react @trendmicro/react-sidenav\n  ```\n\n2. At this point you can import `@trendmicro/react-sidenav` and its styles in your application as follows:\n\n  ```js\n  import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';\n\n  // Be sure to include styles at some point, probably during your bootstraping\n  import '@trendmicro/react-sidenav/dist/react-sidenav.css';\n  ```\n\n## Usage\n\nThese examples make use of font-awesome.\n\n```jsx\n\u003cSideNav\n    onSelect={(selected) =\u003e {\n        // Add your code here\n    }}\n\u003e\n    \u003cSideNav.Toggle /\u003e\n    \u003cSideNav.Nav defaultSelected=\"home\"\u003e\n        \u003cNavItem eventKey=\"home\"\u003e\n            \u003cNavIcon\u003e\n                \u003ci className=\"fa fa-fw fa-home\" style={{ fontSize: '1.75em' }} /\u003e\n            \u003c/NavIcon\u003e\n            \u003cNavText\u003e\n                Home\n            \u003c/NavText\u003e\n        \u003c/NavItem\u003e\n        \u003cNavItem eventKey=\"charts\"\u003e\n            \u003cNavIcon\u003e\n                \u003ci className=\"fa fa-fw fa-line-chart\" style={{ fontSize: '1.75em' }} /\u003e\n            \u003c/NavIcon\u003e\n            \u003cNavText\u003e\n                Charts\n            \u003c/NavText\u003e\n            \u003cNavItem eventKey=\"charts/linechart\"\u003e\n                \u003cNavText\u003e\n                    Line Chart\n                \u003c/NavText\u003e\n            \u003c/NavItem\u003e\n            \u003cNavItem eventKey=\"charts/barchart\"\u003e\n                \u003cNavText\u003e\n                    Bar Chart\n                \u003c/NavText\u003e\n            \u003c/NavItem\u003e\n        \u003c/NavItem\u003e\n    \u003c/SideNav.Nav\u003e\n\u003c/SideNav\u003e\n```\n\n### React Router v4 with React v16\n\n```jsx\n\u003cRouter\u003e\n    \u003cRoute render={({ location, history }) =\u003e (\n        \u003cReact.Fragment\u003e\n            \u003cSideNav\n                onSelect={(selected) =\u003e {\n                    const to = '/' + selected;\n                    if (location.pathname !== to) {\n                        history.push(to);\n                    }\n                }}\n            \u003e\n                \u003cSideNav.Toggle /\u003e\n                \u003cSideNav.Nav defaultSelected=\"home\"\u003e\n                    \u003cNavItem eventKey=\"home\"\u003e\n                        \u003cNavIcon\u003e\n                            \u003ci className=\"fa fa-fw fa-home\" style={{ fontSize: '1.75em' }} /\u003e\n                        \u003c/NavIcon\u003e\n                        \u003cNavText\u003e\n                            Home\n                        \u003c/NavText\u003e\n                    \u003c/NavItem\u003e\n                    \u003cNavItem eventKey=\"devices\"\u003e\n                        \u003cNavIcon\u003e\n                            \u003ci className=\"fa fa-fw fa-device\" style={{ fontSize: '1.75em' }} /\u003e\n                        \u003c/NavIcon\u003e\n                        \u003cNavText\u003e\n                            Devices\n                        \u003c/NavText\u003e\n                    \u003c/NavItem\u003e\n                \u003c/SideNav.Nav\u003e\n            \u003c/SideNav\u003e\n            \u003cmain\u003e\n                \u003cRoute path=\"/\" exact component={props =\u003e \u003cRootComponent /\u003e} /\u003e\n                \u003cRoute path=\"/home\" component={props =\u003e \u003cHome /\u003e} /\u003e\n                \u003cRoute path=\"/devices\" component={props =\u003e \u003cDevices /\u003e} /\u003e\n            \u003c/main\u003e\n        \u003c/React.Fragment\u003e\n    )}\n    /\u003e\n\u003c/Router\u003e\n```\n\n### Close the side navigation menu when clicking outside\n\nYou can find a click-outside React component (https://github.com/tj/react-click-outside/blob/master/index.js) and do something below:\n\n```jsx\n\u003cClickOutside\n    onClickOutside={() =\u003e {\n        this.setState({ expanded: false });\n    }}\n\u003e\n    \u003cSideNav\n        expanded={this.state.expanded}\n        onToggle={(expanded) =\u003e {\n            this.setState({ expanded });\n        }}\n    \u003e\n        \u003cSideNav.Toggle /\u003e\n        \u003cSideNav.Nav defaultSelected=\"home\"\u003e\n            \u003cNavItem eventKey=\"home\"\u003e\n                \u003cNavIcon\u003e\n                    \u003ci className=\"fa fa-fw fa-home\" style={{ fontSize: '1.75em' }} /\u003e\n                \u003c/NavIcon\u003e\n                \u003cNavText\u003e\n                    Home\n                \u003c/NavText\u003e\n            \u003c/NavItem\u003e\n        \u003c/SideNav.Nav\u003e\n    \u003c/SideNav\u003e\n\u003c/ClickOutside\u003e\n```\n\n## API\n\n### Properties\n\n#### SideNav\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | 'nav' | A custom element for this component.\ndisabled | boolean | | Whether the navigation toggle is disabled.\nexpanded | boolean | | Whether the side navigation is expanded or collapsed.\nonToggle | function(boolean) | | Callback fired when toggling the side navigation between expanded and collapsed state.\nonSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.\n\n#### Toggle\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | 'button' | A custom element for this component.\ndisabled | boolean | false | Whether the navigation toggle is disabled.\nexpanded | boolean | false | Whether the side navigation is expanded or collapsed.\n\n#### Nav\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | 'div' | A custom element for this component.\nonSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.\nselected | any | | The selected navigation item.\ndefaultSelected | any | | The initially selected navigation item.\nexpanded | boolean | false | Whether the side navigation is expanded or collapsed.\n\n#### NavItem\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\ncomponentClass | element | 'div' | A custom element for this component.\nactive | boolean | false | Highlight the navigation item as active.\ndisabled | boolean | false | Disable the navigation item, making it unselectable.\nexpanded | boolean | false | Whether the navigation item is expanded or collapsed.\neventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item.\nonClick | function(event) | | Callback fired when the navigation item is clicked.\nonSelect | function(eventKey, event) | | Callback fired when a navigation item is selected.\nnavitemClassName | | |\nnavitemStyle | | |\nsubnavClassName | | |\nsubnavStyle | | |\n\n#### NavIcon\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nchildren | any | |\n\n#### NavText\n\nName | Type | Default | Description \n:--- | :--- | :------ | :----------\nchildren | any | |\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-sidenav","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftrendmicro-frontend%2Freact-sidenav","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftrendmicro-frontend%2Freact-sidenav/lists"}