https://github.com/adminmart/react-mui-sidebar
React MUI Sidebar helps to create side Navigation. ( with Typescript )
https://github.com/adminmart/react-mui-sidebar
mui npm package sidebar sidenav
Last synced: 5 months ago
JSON representation
React MUI Sidebar helps to create side Navigation. ( with Typescript )
- Host: GitHub
- URL: https://github.com/adminmart/react-mui-sidebar
- Owner: adminmart
- Created: 2024-01-01T11:14:03.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-27T13:16:53.000Z (7 months ago)
- Last Synced: 2025-10-27T13:19:02.461Z (7 months ago)
- Topics: mui, npm, package, sidebar, sidenav
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-mui-sidebar
- Size: 2.72 MB
- Stars: 37
- Watchers: 1
- Forks: 8
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## React MUI Sidebar
React MUI Sidebar helps to create side Navigation.
# Live Demo
[Demo](https://react-mui-sidebar.vercel.app)
## Authors
- [@adminmart](https://adminmart.com)
## 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.
[](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)
👉 **Check it out here:** [Dashboard Template](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)
## 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 (
AdminMart
}
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:
### [React Tailwind Sidebar](https://www.npmjs.com/package/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`.