React MUI Sidebar

React MUI Sidebar helps to create side Navigation.

Live Demo

Demo

Authors

• @adminmart

Screenshots

🧩 Live Example — Dashboard Template

We’ve built a complete Admin Dashboard Template using this npm package!
It’s the perfect example of how you can use react-mui-sidebar in a real-world app.

👉 Check it out here: Dashboard Template

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";
import AccessAlarms from "@mui/icons-material/AccessAlarms";
import CottageOutlinedIcon from "@mui/icons-material/CottageOutlined";
{
  /* if you are using react then import link from  */
}
import { Link } from "react-router-dom";
{
  /* if you are using nextjs then import link from  */
}
import Link from "next/link";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo
        component={Link}
        href="/"
        img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
      >
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem
          icon={<CottageOutlinedIcon />}
          component={Link}
          link="/tes"
          badge={true}
          isSelected={true}
        >
          {" "}
          {/* Set badge to boolean true */}
          Modern
        </MenuItem>
        <MenuItem icon={<AccessAlarms />} component={Link} link="/test">
          eCommerce
        </MenuItem>
        <MenuItem component={Link} link="/ana">
          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" component={Link} link="https://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 | | onLogout | function | handleLogout | set the logout function for user logout |

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 | | component | component | Link | set react router link or nextjs Link to apply route | | badge | boolean | false | set the badge on menu items | | badgeColor | string | primary | set badge color | | badgeTextColor | string | #ffffff | set any badge text 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 | | isSelected | boolean | false | set selected menu item |

Logo Api Reference

  <Logo></Logo>

| Props | Type | Default | Description | | :----------- | :---------- | :--------- | --------------------------------------------------- | | img | string | Logo url | set the logo of the sidebar | | href | string | set url | set any url you wanted to redirect | | component | component | Link | set react router link or nextjs Link to apply route |

🔗 Related Sidebars

Looking for a Tailwind CSS alternative to this Material UI-based sidebar?
Explore our companion package below:

React Tailwind Sidebar

A modern, responsive, and fully customizable sidebar component built with React and Tailwind CSS — perfect for creating clean and functional dashboards, admin panels, and web applications.

💡 Both react-mui-sidebar and react-tailwind-sidebar are crafted to simplify sidebar development — offering flexible layouts, effortless customization, and developer-friendly APIs.

Contributing

Contributions are always welcome!

Please adhere to this project's code of conduct.