react-simple-side-menu

A lightweight side menu based on pure React and CSS.

Usage

To install, simply run the following:

npm install --save react-simple-side-menu

Import the component and the default styling(optional) into your into your React app:

import ReactSimpleSideMenu from "react-simple-side-menu";
import "react-simple-side-menu/styles/react-simple-side-menu-colors.css";

Example

The ReactSimpleSideMenu component has a few props that can be fed into it. However, the menu prop is the main one. You should define the menu as an array of objects and pass it as a prop to the component. For instance,

const menu = [
  {
    title: "Level 0 - 0",
    menuType: "submenu",
    item: [
      {
        title: "Level 1b",
        menuType: "endlink",
        item: () => {console.log("Level 1b")}
      },
      {
        title: "Level 1a",
        menuType: "submenu",
        item: [
          {
            title: "Level 2a",
            menuType: "endlink",
            item: () => {console.log("Level 2a")}
          }
        ]
      }
    ]
  }
]
 

The objects within the array consists of the following keys:

key	type	description
"title"	string	The string that will be displayed as the label for the button
"menuType"	string	"submenu" | "endlink" - determines what happens when clicked
"item"	array | string | func	When menuType is submenu, the item should be an array of this object. When menuType is endlink, the item should be either the string "inherit" or a function that is to be passed to the button upon render. The function passed will trigger upon an onClick event on the button.

Note: When you enter "inherit" for the item key, you will need to pass a callback function to the component.

You can then pass the menu array into the component as follows:

function App() {
  return (
    <ReactSimpleSideMenu menu={menu}/>
  );
}

Using the callback prop

Using the callback prop will make all the endlink buttons trigger the same function upon an onClick event. It is up to you to decide what parameters goes into this function or how this function operates. The item values for the endlink menuType can still be "inherit" or a function. If a function is defined, it will be called instead of the callback prop function.

For example, the following will cause all of the endlink buttons to log "test" into the console.

function App() {
  return (
    <ReactSimpleSideMenu menu={menu} callback={function(){console.log("test")}}/>
  );
}

If you define the menu array to be as follows:

const menu = [
  {
    title: "Level 0 - 0",
    menuType: "submenu",
    item: [
      {
        title: "Level 1b",
        menuType: "endlink",
        item: "inherit"
      },
      {
        title: "Level 1a",
        menuType: "submenu",
        item: [
          {
            title: "Level 2a",
            menuType: "endlink",
            item: () => {console.log("Level 2a")}
          }
        ]
      }
    ]
  }
]
 

Level 1b button will log as "test" but level 2a will log as "Level 2a".

Styling

You can use the default styling or create your own custom styles. You have to define the following classes in your main CSS file in order for the component to be styled properly.

Below contains the default classes, but please go ahead and style then to your liking :)

/* Determines the font color of the entire side menu */
.root-node-color {
    color: white;
}
 
/* Determines the left border color when a submenu is active */
.root-node.active {
    border-left: 4px solid lightblue;
}
 
/* Determines the background color of the entire side menu */
.overall-background {
    background-color: #3F51B5;
}

License

MIT