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)

Roadmap

Any contribution is welcome.

To be done:

• tests & CI support
• refactor examples code (it's awful, I know)