react-simple-sidenav

Simple, light weight(4.78 kB), fully customizable React component for side navigation.

Inspired by Side Navigation Bar TL;DW episode of Supercharged

Demo: https://gauravchl.github.io/react-simple-sidenav/demo/

Install:

npm install react-simple-sidenav

Use:

import SideNav from 'react-simple-sidenav';

<SideNav
  title="Simple Sidenav"
  items={['Item 1', 'Item 2']}
  />

Props:

Props	Type	Description
style	object	Style for root element
navStyle	object	Style for nav element
titleStyle	object	Styles for title
itemStyle	object	Styles for item
itemHoverStyle	object	Hover style for item
title	node	Will display on top
items	[node]	Array of items in navigation list below the title
showNav	boolean	Control whether to open or close side navigation
openFromRight	boolean	This opens navigation from right side of the window, default is false (from left side).
onShowNav	function	Trigger when navigation opens
onHideNav	function	Trigger when navigation close
children	node	Content of navigation. If supplying children to SideNav, title and items will be ignore and replaced by children

Examples:

[with default styles]

  import react from 'react';
  import SideNav, {MenuIcon} from 'react-simple-sidenav';

  React.createClass({
    render() {
      return(
        <MenuIcon onClick={() => this.setState({showNav: true})}/>

        <SideNav
          showNav = {this.state.showNav}
          onHideNav = {() => this.setState({showNav: false})} />
      )
    }
  })

[with custom styles]

  <SideNav
    showNav        =  {this.state.showNav}
    onHideNav      =  {() => this.setState({showNav: false})}
    title          =  "Hello World"
    items          =  {['home', 'services', 'about', 'contact']}
    titleStyle     =  {{backgroundColor: '#4CAF50'}}
    itemStyle      =  {{backgroundColor: '#fff'}}
    itemHoverStyle =  {{backgroundColor: '#CDDC39'}}
    />

[with custom items]

  <SideNav
    showNav={this.state.showNav3}
    onHideNav={()=>this.setState({showNav3:false})}
    title={<div>Hello octo <img src='git-mark.png' width='26' /></div>}
    titleStyle={{backgroundColor: '#2196F3'}}
    items={[
      <a target='_blank' href='https://github.com/gauravchl/react-simple-sidenav'>View Source on github</a>,
      <a target='_blank' href='https://www.npmjs.com/package/react-simple-sidenav'>Install via npm</a>,
      <a target='_blank' href='https://gauravchl.github.io/react-simple-sidenav/demo/'>demo</a>
      ]} />

Contributing:

Please feel free to submit any bugs or suggestions as issues. Pull requests are welcome. To build package locally run following commands which will build the package from source and update the demo inside react-simple-sidenav/demo/.

cd /react-simple-sidenav/
npm install
npm run build