react-minimal-side-navigation

🙋‍♂️ Made by @abhijithvijayan

Donate:
PayPal,
Patreon

❤️ it? ⭐️ it on GitHub or Tweet about it.

Table of Contents

- Demo
- Installation
- Usage
- API
- Issues
- 🐛 Bugs
- LICENSE

Demo

> https://codesandbox.io/s/react-minimal-side-navigation-example-y299d

Installation

Ensure you have Node.js 10 or later installed. Then run the following:

``


via npm

`js
import React from 'react';

import {Navigation} from 'react-minimal-side-navigation';
import 'react-minimal-side-navigation/lib/ReactMinimalSideNavigation.css';

function App() {
return (
<>
// you can use your own router's api to get pathname
activeItemId="/management/members"
onSelect={({itemId}) => {
// 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
label._

$3

Please file an issue here for bugs, missing documentation, or unexpected behavior.

See Bugs

$3

- Shared Eslint & Prettier Configuration - @abhijithvijayan/eslint-config
- Shared TypeScript Configuration - @abhijithvijayan/tsconfig`

License

MIT © Abhijith Vijayan