# react-sidemenu
> Lightweight customizable React sidemenu component.
Latest version **1.1.0** (published 2019-02-02) · MIT license · 0 weekly downloads
## Install
```sh
npm install react-sidemenu
pnpm add react-sidemenu
yarn add react-sidemenu
bun add react-sidemenu
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.0 |
| Published | 2019-02-02 |
| First published | 2016-08-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 57 |
| Author | Rok Fortuna & Urban Marovt |
| Maintainers | fortunar, umarovt |
| Keywords | react, sidebar, sidenav, navigation, menu, side |
## Links
- npm: https://www.npmjs.com/package/react-sidemenu
- Repository: https://github.com/banomaster/react-sidemenu
- Homepage: https://github.com/banomaster/react-sidemenu#readme
- Issues: https://github.com/banomaster/react-sidemenu/issues
- npm.io page: https://npm.io/package/react-sidemenu
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 1.1.0 (latest) — 2019-02-02
- 1.0.4 — 2018-10-01
- 1.0.3 — 2018-10-01
- 1.0.2 — 2018-09-15
- 1.0.1 — 2018-09-15
- 1.0.0 — 2018-09-15
- 0.0.15 — 2018-08-17
- 0.0.14 — 2018-03-08
- 0.0.13 — 2017-10-23
- 0.0.12 — 2017-10-02
- 0.0.11 — 2017-10-02
- 0.0.10 — 2016-09-02
- 0.0.9 — 2016-09-01
- 0.0.8 — 2016-09-01
- 0.0.7 — 2016-08-31
- … 5 more at https://npm.io/package/react-sidemenu/versions
## README
# 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](https://fortunar.github.io/react-sidemenu/).
## Demo & Examples
[Demo](https://fortunar.github.io/react-sidemenu/) 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
`` - main component
|**Option**|**Default**|**Description**|
| --- | --- | --- |
| items | null | Property for the JSON configuration of the component SideMenu component. Check out [Demo](https://fortunar.github.io/react-sidemenu/) 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](https://fortunar.github.io/react-sidemenu/) 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](https://fortunar.github.io/react-sidemenu/)|
| 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](https://fortunar.github.io/react-sidemenu/)|
| rtl | false | This property enables you to use the sidemenu in a right-to-left page. [Demo](https://fortunar.github.io/react-sidemenu/)|
| shouldTriggerClickOnParents | false | This property enables triggering 'onMenuItemClick' on parent items that have children. |
`- ` - 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](http://fontawesome.io/) 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)
---
_Source: https://npm.io/package/react-sidemenu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._