React-sidemenu NPM

react-sidemenu

Lightweight side menu component written in React.js. No jQuery, just CSS3.

Features

Pure React.js, no external dependencies
Configure via JSON or via React components
Packed with default ready-to-use styling
Easy to customize styling guide
Custom rendering, collapse control, right-to-left etc.
Flow type checking support

Usage

Install the component with NPM:

npm install react-sidemenu --save

Import the component in your React.js application:

import {SideMenu} from 'react-sidemenu';

Flow

If you want to have access to Flow typed components, include SideMenu.js from dist folder when installing via npm.

Styling!!!

To use default styling include side-menu.css to your project. You can find it in dist folder when installing via npm. For an idea on how to customize styling see Demo.

Demo & Examples

Demo showcasing the functionalities & code examples. We use Font Awesome as a CDN for the example icons to show.

You can run examples by yourself. Clone the repo and do:

npm install
npm start

The examples are run using Webpack development server.

Options

<SideMenu> - main component

Option	Default	Description
items	null	Property for the JSON configuration of the component SideMenu component. Check out Demo to find out how it works.
activeItem	null	Preset starting active item. Also used for opening and closing menu items from code (e.g. from a button).
collapse	true	This property gives you the capability to enable or disable collapsing menu when other elements of the menu are clicked.
theme	'default'	This sets a class for the component that you can use to apply custom styling. The class will be Side-menu-theme_name. Note: our default theme uses Font Awesome icons. See Demo for an detailed example.
renderMenuItemContent({ icon: icon, value: value, label: label })	null	This property enables you to provide a custom render method for items. Function is passed one parameter, representing the menu item being rendered. It receives an object with attributes: icon, label and value. Demo
onMenuItemClick	`(value, extras) => window.location.href = '#' + value`	This property enables you to provide custom onClick method for items. The function gets passed the value of the clicked item and item extras (object). Demo
rtl	false	This property enables you to use the sidemenu in a right-to-left page. Demo
shouldTriggerClickOnParents	false	This property enables triggering 'onMenuItemClick' on parent items that have children.

<Item> - this component is for the non-JSON config of the menu

Option	Description
value	This is the link where you will be redirected after you click the item or the value attribute inside method onMenuItemClick
label	This is the representative value of the item
icon	This is the representative icon of the item. It should be font-awesome class name.
onClick	Custom on click method specific for this item (overrides onMenuItemClick).
extras	Container for additional data. (Not required)