# 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) [![NPM](https://nodei.co/npm/@trendmicro/react-sidenav.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-sidenav/) React SideNav Demo: https://trendmicro-frontend.github.io/react-sidenav ## Installation 1. Install the latest version of [react](https://github.com/facebook/react) and [react-sidenav](https://github.com/trendmicro-frontend/react-sidenav): ``` npm install --save react @trendmicro/react-sidenav ``` 2. At this point you can import `@trendmicro/react-sidenav` and its styles in your application as follows: ```js import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav'; // Be sure to include styles at some point, probably during your bootstraping import '@trendmicro/react-sidenav/dist/react-sidenav.css'; ``` ## Usage These examples make use of font-awesome. ```jsx { // Add your code here }} > Home Charts Line Chart Bar Chart ``` ### React Router v4 with React v16 ```jsx ( { const to = '/' + selected; if (location.pathname !== to) { history.push(to); } }} > Home Devices
} /> } /> } />
)} /> ``` ### Close the side navigation menu when clicking outside You can find a click-outside React component (https://github.com/tj/react-click-outside/blob/master/index.js) and do something below: ```jsx { this.setState({ expanded: false }); }} > { this.setState({ expanded }); }} > Home ``` ## API ### Properties #### SideNav Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | 'nav' | A custom element for this component. disabled | boolean | | Whether the navigation toggle is disabled. expanded | boolean | | Whether the side navigation is expanded or collapsed. onToggle | function(boolean) | | Callback fired when toggling the side navigation between expanded and collapsed state. onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected. #### Toggle Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | 'button' | A custom element for this component. disabled | boolean | false | Whether the navigation toggle is disabled. expanded | boolean | false | Whether the side navigation is expanded or collapsed. #### Nav Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | 'div' | A custom element for this component. onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected. selected | any | | The selected navigation item. defaultSelected | any | | The initially selected navigation item. expanded | boolean | false | Whether the side navigation is expanded or collapsed. #### NavItem Name | Type | Default | Description :--- | :--- | :------ | :---------- componentClass | element | 'div' | A custom element for this component. active | boolean | false | Highlight the navigation item as active. disabled | boolean | false | Disable the navigation item, making it unselectable. expanded | boolean | false | Whether the navigation item is expanded or collapsed. eventKey | any | _(required)_ | Value passed to the `onSelect` handler, useful for identifying the selected navigation item. onClick | function(event) | | Callback fired when the navigation item is clicked. onSelect | function(eventKey, event) | | Callback fired when a navigation item is selected. navitemClassName | | | navitemStyle | | | subnavClassName | | | subnavStyle | | | #### NavIcon Name | Type | Default | Description :--- | :--- | :------ | :---------- children | any | | #### NavText Name | Type | Default | Description :--- | :--- | :------ | :---------- children | any | | ## License MIT

	Stars	Issues	Version	Updated	Created
@trendmicro/react-sidenav	350	43	0.5.0	4 years ago	6 years ago
device-detect	3	2	1.0.7	9 years ago	9 years ago
react-bootstrap-drawer	15	1	1.0.1	2 years ago	3 years ago
react-hamburger-menu	105	17	1.2.1	4 years ago	8 years ago

@trendmicro/react-sidenav vs device-detect vs react-bootstrap-drawer vs react-hamburger-menu

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past