React-Sidemenubar

React-sidemenubar allows you to create a responsive sidebar with easy to customize.

Installation

$ npm install --save react-sidemenubar
$ yarn add react-sidemenubar

import { Menu, Toggle } from "react-sidemenubar";
import "react-sidemenubar/dist/react-sidemenubar.css";

Features

• Easy to set up for real, you can make it work in less than 1minute!
• Super easy to customize
• Has onClick hooks. Can pass onclick event when user interact.
• Toggle function allows you to toggle the sidemenu from open to close and close to open.
• And much more !

The gist

import React from "react";

import { Menu, Toggle } from "react-sidemenubar";
import "react-sidemenubar/dist/react-sidemenubar.css";

function App() {
  const data = [
    {
      title: "Home",
      section: true,
    },
    {
      icon: <img src="home.png" alt="home" />,
      title: "Home",
      submenus: [
        {
          title: "Dashboard 1",
          onClick: (e) => {
            alert("home1");
          },
        },
        {
          title: "Dashboard 2",
          onClick: (e) => {
            alert("home2");
          },
        },
        {
          title: "Dashboard 3",
          onClick: (e) => {
            alert("home3");
          },
        },
      ],
    },
    {
      title: "Auth",
      section: true,
    },
    {
      icon: <img src="login.png" alt="home" />,
      title: "Login",
    },
    {
      icon: <img src="register.png" alt="home" />,
      title: "Register",
    },
    {
      icon: <img src="logout.png" alt="home" />,
      title: "Logout",
    },
  ];

  return (
    <div>
      <button
        onClick={() => {
          Toggle();
        }}
      >
        Toggle
      </button>
      <Menu
        menus={data}
        bg="transparent"
        activeBg="linear-gradient(45deg, #204520, #74b474)"
        color="black"
        activeColor="white"
        menubg="#efefef"
        menuborder={5}
      />
    </div>
  );
}

The properties

Properties used to customise the rendering:

| Name | Type | Description | | ----------- | ------ | ------------------------------------------------- | | color | String | Text color of a menu | | data | Array | Menu items | | bg | String | Background color of menu item | | activeBg | String | Background color of menu item when user interacts | | activeColor | String | Text color of menu item when user interacts | | menubg | String | Background color of menu | | menuborder | Number | Border-radius of a menu item |

data Properties

| Name | Type | Description | | -------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | | title | String | Menu title | | icon | String or HTMLElement | 'optional' Menu icon | | submenus | Array | 'optional' Submenu items | | onClick | func | 'optional' Calls the given function when user clicks on title and pass two parameters, first one is click event and second is the object of tree prop | | section | boolean | 'optional' true if menu item is a section, default is false. |

Demo

A demo is worth a thousand words

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! [email protected]

Financial Contributors

Become a financial contributor and help us sustain our community. Contribute

License

Licensed under MIT