React MUI Sidebar

React MUI Sidebar helps to create side Navigation.

Live Demo

Demo

Authors

- @adminmart

Screenshots

!App Screenshot

#

🧩 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

``bash
npm i react-mui-sidebar
`

Issues

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

Usage/Examples

`javascript
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 (

component={Link}
href="/"
img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png"
>
AdminMart


icon={}
component={Link}
link="/tes"
badge={true}
isSelected={true}
>
{" "}
{/ Set badge to boolean true /}
Modern

} component={Link} link="/test">
eCommerce


Analytical



Chat
Calendar



Post
Details

new
Hello



Chip

External Link



);
};

export default App;
`

API Reference

#### Sidebar Api Reference

`http

`

| 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

`http

`

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

#### Submenu Api Reference

`http

`

| Props | Type | Default | Description |
| :------------- | :---------- | :------------------------------------ | --------------------------------- |
| title | string | blank | title of the submenu |
| icon | component | mui icon - | 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

`http

`

| Props | Type | Default | Description |
| :--------------- | :---------- | :------------------------------------ | --------------------------------------------------- |
| icon | component | mui icon - | 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

`http

`

| 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:

$3

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`.