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:
;;
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" {console} title: "Level 1a" menuType: "submenu" item: title: "Level 2a" menuType: "endlink" {console}
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:
{ 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.
{ return <ReactSimpleSideMenu menu=menu callback={console}/> ;}
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" {console}
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 */ /* Determines the left border color when a submenu is active */ /* Determines the background color of the entire side menu */