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.