React MUI Sidebar

React MUI Sidebar helps to create side Navigation.

Live Demo

Demo

Authors

• @adminmart

Screenshots

Installation

To install react mui sidebar npm package

  npm i react-mui-sidebar

Issues

For any Issues, create new issue on https://github.com/adminmart/react-mui-sidebar/issues

Usage/Examples

import React from "react";

import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png">
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem link="/" badge="true">
          Modern
        </MenuItem>
        <MenuItem>eCommerce</MenuItem>
        <MenuItem>Analytical</MenuItem>
      </Menu>
      <Menu subHeading="APPS">
        <MenuItem>Chat</MenuItem>
        <MenuItem>Calendar</MenuItem>
      </Menu>
      <Menu subHeading="OTHERS">
        <Submenu title="Menu Level">
          <MenuItem>Post</MenuItem>
          <MenuItem>Details</MenuItem>
          <Submenu title="Level 2">
            <MenuItem>new</MenuItem>
            <MenuItem>Hello</MenuItem>
          </Submenu>
        </Submenu>

        <MenuItem>Chip</MenuItem>
        <MenuItem target="_blank" link="google.com">
          External Link
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;

API Reference

Sidebar Api Reference

  <Sidebar></Sidebar>

| Props | Type | Default | Description | | :-------------------- | :-------- | :--------------- | ----------------------------------------------------- | | width | string | 260px | set the width of sidebar | | textColor | string | #2b2b2b | set this color to all MenuItem and SubMenu of sidebar | | isCollapse | boolean | false | set the Sidebar to mini sidebar | | themeColor | string | #5d87ff | set the theme primary color | | themeSecondaryColor | string | #49beff | set the theme secondary color | | mode | string | light | set the mode of the Sidebar light or Dark | | direction | string | ltr | set the direction of Sidebar ltr or rtl | | userName | string | Mathew | set the user name of User Profile | | designation | string | Designer | set the user designation of User Profile | | showProfile | boolean | true | show the user profile true or false | | userimg | string | user image url | set the image of user in User Profile |

Menu Api Reference

  <Menu></Menu>

| Props | Type | Default | Description | | :----------- | :------- | :------ | ------------------ | | subHeading | string | menu | menu heading title |

Submenu Api Reference

  <Submenu></Submenu>

| Props | Type | Default | Description | | :------------- | :---------- | :------------------------------------ | --------------------------------- | | title | string | blank | title of the submenu | | icon | component | mui icon - <FiberManualRecordIcon/> | set icon of submenu | | borderRadius | string | 8px | set border radius of Submenu | | textFontSize | string | 14px | set text Font Size of the submenu | | disabled | boolean | false | enable/disable the Submenu |

MenuItem Api Reference

  <MenuItem></MenuItem>

| Props | Type | Default | Description | | :------------- | :---------- | :------------------------------------ | --------------------------------------------- | | icon | component | mui icon - <FiberManualRecordIcon/> | set icon of menu item | | link | string | # | pass link for component to redirect | | badge | boolean | false | set the badge on menu items | | badgeColor | string | primary | set badge color | | badgeContent | string | 6 | set content on badge | | textFontSize | string | 14px | set font size of menu item | | borderRadius | string | 8px | set border radius of menu item | | disabled | boolean | false | enable/disable the menu item | | badgeType | string | filled | set badgeType of menu item filled or outlined | | target | string | `` | set target of menu item _blank |

Logo Api Reference

  <Logo></Logo>

| Props | Type | Default | Description | | :---- | :------- | :--------- | --------------------------- | | img | string | Logo url | set the logo of the sidebar |

Contributing

Contributions are always welcome!

Please adhere to this project's code of conduct.