A simple side overlay navigation for React.

Usage no npm install needed!

<script type="module">
  import shaplaReactSidenav from 'https://cdn.skypack.dev/@shapla/react-sidenav';


React Sidenav

A simple side overlay navigation for React.

Table of contents


npm install --save @shapla/react-sidenav



with Sass:

import '@shapla/react-sidenav/src/index.scss';

with CSS:

import '@shapla/react-sidenav/dist/sidenav.css';

Javascript Instantiation

import React from 'react';
import Sidenav from '@shapla/react-sidenav';
class MyApp extends React.Component {

  constructor(props) {

    this.state = {
      activeLeftNav: false,

  render() {
    return (
        <button onClick={() => this.setState({activeLeftNav: true})}>Show Sidenav</button>

        <Sidenav active={this.state.activeLeftNav} position={"left"}
                 onClose={() => this.setState({activeLeftNav: false})}/>


Property Type Required Default Description
active Boolean yes false Set true to show sidenav
showOverlay Boolean no true Set false to hide overlay
navWidth String no 300px Navigation width
position String no left Value can be one of left, right, bottom, top
onClose Function no ()=>{} Will trigger this when user click on background.