react-itra-sidenav v1.0.0

React ItraSideNav

React side navigation component, It has list of options See Options List Section that can be selected based on requirement. ItraSideNav can also handle dynamic data very well.

Demo

Live Demo URL : http://demo.techhysahil.com/react-ItraSideNav/

Getting Started

The easiest way to use React ItraSideNav is to install it using NPM.

npm install react-itra-sidenav --save

Now import React ItraSideNav into your project.

import ItraSideNav from 'react-itra-sidenav';

// Be sure to include styles at some point
import 'react-multi-select/dist/font/icons.css';
import 'react-multi-select/dist/react-ItraSideNav.min.css';

Usage

After adding react-itra-sidenav into your project, just add below tag into your templete.

let dataSource = [
        {
            displayText : "Overview",
            linkValue : "http://test.analytics.mn/overview.jsp",
            iconClass : "icon icon_Icon_AnalyticsInterface-20",
            isOpen : false,
            isActive : true,
            isDisable : false
        },
        {
            displayText : "Reports",
            linkValue : null,
            iconClass : "icon icon_Icon_AnalyticsInterface-32",
            isOpen : false,
            isActive : false,
            isDisable : false,
            nestedNavgation : [
                {
                    displayText : "Analyse",
                    linkValue : "/analyse",
                    iconClass : "fa fa-minus",
                    isActive : false,
                    isDisable : false
                },
                {
                    displayText : "Saved",
                    linkValue : "/report",
                    iconClass : "fa fa-minus",
                    isActive : false,
                    isDisable : false                        }
            ]
        },
        {
            displayText : "Team Specs",
            linkValue : "/team-specs",
            iconClass : "icon icon_Icon_AnalyticsInterface-19",
            isOpen : false,
            isActive : true,
            isDisable : false
        },
        {
            displayText : "User Specs",
            linkValue : "/user-specs",
            iconClass : "icon icon_Icon_AnalyticsInterface-30",
            isOpen : false,
            isActive : true,
            isDisable : false
        }
    ];

<ItraSideNav 
  dataSource = {dataSource}
  leftnavToggle = {this.leftnavToggle} 
/>

ItraSideNav Options

Navigation Item Options

Events

Authors

*Sahil Gupta Github

License

This project is licensed under the Custom License - see the LICENSE.md file for details