A simple dashboard layout to build your app dashboard for React.

Usage no npm install needed!

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


React Sidenav

A simple dashboard layout to build your app dashboard for React.

Table of contents


npm install --save @shapla/react-dashboard-layout



with Sass:

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

with CSS:

import '@shapla/react-dashboard-layout/dist/dashboard-layout.css';

Javascript Instantiation

import React from 'react';
import DashboardLayout from '@shapla/react-dashboard-layout';

class MyApp extends React.Component {
  constructor(props) {

    this.state = {
      activeSideNav: false,

  render() {
    let menuItems = Array.from({length: 50}, (x, i) => i + 1);
    let sidenavMenu = menuItems.map(item => {
      return (
        <li className="sidenav-list__item" key={item}>
          <a className="sidenav-list__link" href="#">Menu item {item}</a>
    let pageContent = menuItems.map(item => <p key={item}>{item}. Dashboard Content will go here</p>);

    return (
      <div className="example-dashboard-layout">
          userDisplayName='Sayful Islam'
          onShowSidenav={() => this.setState({activateSideNav: true})}
          onHideSidenav={() => this.setState({activateSideNav: false})}
          sidenavMenu={<ul className="sidenav-list">{sidenavMenu}</ul>}
          navbarEnd={<a href='#'>Log Out</a>}


Property Type Required Default Description
title String no `` Dashboard title
userDisplayName String no `` User display name
avatarUrl String no `` User avatar url
greeting String no Hello, Greeting text
headerHeight String no 56px Height of header
headerTheme String no primary Value can be default or primary or secondary
activateSideNav Boolean no false Boolean value hide/show sidenav
navWidth String no 300px Width of side navigation
sideNavType String no overlay Value can be overlay or off-canvas. off-canvas is experimental
showOverlay Boolean no true Should show overlay color when side navigation active.
sidenavContent String no `` Side navigation content.
navbarBrand String no `` Navbar brand content.
navbarStart String no `` Content after navbarBrand
navbarEnd String no `` Content at right side
onShowSidenav Func no `` Function run when click to open sidebar.
onHideSidenav Func no `` Function run when click to hide sidebar.