Noiseless Party Machine

    react-minimal-side-navigation
    TypeScript icon, indicating that this package has built-in type declarations

    1.9.2 • Public • Published

    react-minimal-side-navigation

    🙋‍♂️ Made by @abhijithvijayan

    Donate: PayPal, Patreon

    Buy Me a Coffee


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

    Table of Contents

    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

    License

    MIT © Abhijith Vijayan

    Install

    npm i react-minimal-side-navigation

    DownloadsWeekly Downloads

    1,570

    Version

    1.9.2

    License

    MIT

    Unpacked Size

    33.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • abhijithvijayan