react-minimal-side-navigation
Donate:
PayPal,
Patreon
❤️ it? ⭐️ it on [GitHub](https://github.com/abhijithvijayan/react-minimal-side-navigation/stargazers) or [Tweet](https://twitter.com/intent/tweet?text=Check%20out%20react-minimal-side-navigation%21%20by%20%40_abhijithv%0A%0AMinimal%20side%20navigation%20component%20for%20React%0Ahttps%3A%2F%2Fgithub.com%2Fabhijithvijayan%2Freact-minimal-side-navigation%0A%0A%23react%20%23sidenavigation%20%23library%20%23javascript%20%23typescript) about it.
## Table of Contents
- [Demo](#demo)
- [Installation](#installation)
- [Usage](#usage)
- [API](#api)
- [Issues](#issues)
- [🐛 Bugs](#-bugs)
- [LICENSE](#license)
## Demo
> https://codesandbox.io/s/react-minimal-side-navigation-example-y299d
## Installation
Ensure you have [Node.js](https://nodejs.org) 10 or later installed. Then run the following:
```
# via npm
npm install react-minimal-side-navigation
# or yarn
yarn add react-minimal-side-navigation
```
## Usage
```js
import React from 'react';
import {Navigation} from 'react-minimal-side-navigation';
import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';
function App() {
return (
<>
{
// maybe push to the route
}}
items={[
{
title: 'Dashboard',
itemId: '/dashboard',
// you can use your own custom Icon component as well
// icon is optional
elemBefore: () => ,
},
{
title: 'Management',
itemId: '/management',
elemBefore: () => ,
subNav: [
{
title: 'Projects',
itemId: '/management/projects',
// Requires v1.9.1+ (https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/13)
elemBefore: () => ,
},
{
title: 'Members',
itemId: '/management/members',
elemBefore: () => ,
},
],
},
{
title: 'Another Item',
itemId: '/another',
subNav: [
{
title: 'Teams',
itemId: '/management/teams',
},
],
},
]}
/>
);
}
```
## API
#### items
Type: `array`
Navigation items to render.
#### activeItemId
Type: `string`
Currently selected item id.
#### onSelect
Type: `function`
Called when item is clicked.
## Issues
_Looking to contribute? Look for the [Good First Issue](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22good+first+issue%22)
label._
### 🐛 Bugs
Please file an issue [here](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/new) for bugs, missing documentation, or unexpected behavior.
[**See Bugs**](https://github.com/abhijithvijayan/react-minimal-side-navigation/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc+label%3A%22type%3A+bug%22)
### Linting & TypeScript Config
- Shared Eslint & Prettier Configuration - [`@abhijithvijayan/eslint-config`](https://www.npmjs.com/package/@abhijithvijayan/eslint-config)
- Shared TypeScript Configuration - [`@abhijithvijayan/tsconfig`](https://www.npmjs.com/package/@abhijithvijayan/tsconfig)
## License
MIT © [Abhijith Vijayan](https://abhijithvijayan.in)
