Create Multi-level Side Navigation in React with react-sidenav

A minimal clean, mobile-friendly, multilevel side navigation (also called off-canvas nav) for React app.

How to use it:

1. Install and import the side navigation component.

# Yarn
$ yarn add react-minimal-side-navigation

# NPM
$ npm i react-minimal-side-navigation --saveimport React from 'react';
import {Navigation} from 'react-minimal-side-navigation';
// stylesheet
import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';

2. Create a basic side navigation in the app as follows:

function App() {
  return (
    <>
      <Navigation
          // use your own router's api to get pathname
          activeItemId="/category/react"
          onSelect={({itemId}) => {
            // maybe push to the route
          }}
          items={[
            {
              title: 'Home',
              itemId: '/home',
              // use your own custom Icon component as well
              elemBefore: () => <Icon name="home" />,
            },
            {
              title: 'Category',
              itemId: '/category',
              elemBefore: () => <Icon name="category" />,
              subNav: [
                {
                  title: 'React',
                  itemId: '/category/React',
                },
                {
                  title: 'React Native',
                  itemId: '/category/reactnative',
                },
              ],
            },
            {
              title: 'Contact',
              itemId: '/contact',
              subNav: [
                {
                  title: 'About',
                  itemId: '/contact/about',
                },
              ],
            },
          ]}
        />
    </>
  );
}

Preview:

Download Details:

Author: abhijithvijayan

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/abhijithvijayan/react-minimal-side-navigation

License: MIT

#reactjs #react