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 --save
import 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