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
npm install react-minimal-side-navigation

# or yarn
yarn add react-minimal-side-navigation

Usage

import React from 'react';

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

function App() {
    return (
      <>
        <Navigation
            // 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: () => <Icon name="inbox" />,
              },
              {
                title: 'Management',
                itemId: '/management',
                elemBefore: () => <Icon name="users" />,
                subNav: [
                  {
                    title: 'Projects',
                    itemId: '/management/projects',
                    // Requires v1.9.1+ (https://github.com/abhijithvijayan/react-minimal-side-navigation/issues/13)
                    elemBefore: () => <Icon name="cloud-snow" />,
                  },
                  {
                    title: 'Members',
                    itemId: '/management/members',
                    elemBefore: () => <Icon name="coffee" />,
                  },
                ],
              },
              {
                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.

🐛 Bugs

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

See Bugs

Linting & TypeScript Config

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

License

MIT © Abhijith Vijayan