{"id":39219432,"url":"https://github.com/adminmart/react-mui-sidebar","last_synced_at":"2026-01-17T23:26:28.737Z","repository":{"id":214949509,"uuid":"737752437","full_name":"adminmart/react-mui-sidebar","owner":"adminmart","description":"React MUI Sidebar helps to create side Navigation. ( with Typescript ) ","archived":false,"fork":false,"pushed_at":"2025-10-27T13:16:53.000Z","size":2848,"stargazers_count":37,"open_issues_count":7,"forks_count":8,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-27T13:19:02.461Z","etag":null,"topics":["mui","npm","package","sidebar","sidenav"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-mui-sidebar","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/adminmart.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-01-01T11:14:03.000Z","updated_at":"2025-10-27T13:16:56.000Z","dependencies_parsed_at":"2024-01-08T06:39:56.940Z","dependency_job_id":"4a768c59-bbd5-4a83-93bf-ec35ffac7fba","html_url":"https://github.com/adminmart/react-mui-sidebar","commit_stats":null,"previous_names":["adminmart/react-mui-sidebar"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/adminmart/react-mui-sidebar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adminmart%2Freact-mui-sidebar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adminmart%2Freact-mui-sidebar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adminmart%2Freact-mui-sidebar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adminmart%2Freact-mui-sidebar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/adminmart","download_url":"https://codeload.github.com/adminmart/react-mui-sidebar/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/adminmart%2Freact-mui-sidebar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28522165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-17T22:11:28.393Z","status":"ssl_error","status_checked_at":"2026-01-17T22:11:27.841Z","response_time":85,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mui","npm","package","sidebar","sidenav"],"created_at":"2026-01-17T23:26:28.230Z","updated_at":"2026-01-17T23:26:28.731Z","avatar_url":"https://github.com/adminmart.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## React MUI Sidebar\n\nReact MUI Sidebar helps to create side Navigation.\n\n# Live Demo\n\n[Demo](https://react-mui-sidebar.vercel.app)\n\n## Authors\n\n- [@adminmart](https://adminmart.com)\n\n## Screenshots\n\n![App Screenshot](https://adminmart.com/wp-content/uploads/2024/03/mui-sidebar-demo-image.jpg)\n\n#\n\n## 🧩 Live Example — Dashboard Template\n\nWe’ve built a **complete Admin Dashboard Template** using this npm package!  \nIt’s the perfect example of how you can use `react-mui-sidebar` in a real-world app.\n\n\n\n[![App Screenshot](https://camo.githubusercontent.com/d41985fb0401c35774203e019c8616f5556ceb62153ad349a4a56354f55569cd/68747470733a2f2f61646d696e6d6172742e636f6d2f77702d636f6e74656e742f75706c6f6164732f323032332f30332f6d6f6465726e697a652d667265652d6e6578742d6a732d61646d696e2d74656d706c6174652e706e67)](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)\n\n👉 **Check it out here:** [Dashboard Template](https://adminmart.com/product/modernize-free-nextjs-admin-template/?ref=43)  \n\n\n## Installation\n\nTo install react mui sidebar npm package\n\n```bash\n  npm i react-mui-sidebar\n```\n\n## Issues\n\nFor any Issues, create new issue on https://github.com/adminmart/react-mui-sidebar/issues\n\n## Usage/Examples\n\n```javascript\nimport React from \"react\";\n\nimport { Sidebar, Menu, MenuItem, Submenu, Logo } from \"react-mui-sidebar\";\nimport AccessAlarms from \"@mui/icons-material/AccessAlarms\";\nimport CottageOutlinedIcon from \"@mui/icons-material/CottageOutlined\";\n{\n  /* if you are using react then import link from  */\n}\nimport { Link } from \"react-router-dom\";\n{\n  /* if you are using nextjs then import link from  */\n}\nimport Link from \"next/link\";\n\nconst App = () =\u003e {\n  return (\n    \u003cSidebar width={\"270px\"}\u003e\n      \u003cLogo\n        component={Link}\n        href=\"/\"\n        img=\"https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png\"\n      \u003e\n        AdminMart\n      \u003c/Logo\u003e\n      \u003cMenu subHeading=\"HOME\"\u003e\n        \u003cMenuItem\n          icon={\u003cCottageOutlinedIcon /\u003e}\n          component={Link}\n          link=\"/tes\"\n          badge={true}\n          isSelected={true}\n        \u003e\n          {\" \"}\n          {/* Set badge to boolean true */}\n          Modern\n        \u003c/MenuItem\u003e\n        \u003cMenuItem icon={\u003cAccessAlarms /\u003e} component={Link} link=\"/test\"\u003e\n          eCommerce\n        \u003c/MenuItem\u003e\n        \u003cMenuItem component={Link} link=\"/ana\"\u003e\n          Analytical\n        \u003c/MenuItem\u003e\n      \u003c/Menu\u003e\n      \u003cMenu subHeading=\"APPS\"\u003e\n        \u003cMenuItem\u003eChat\u003c/MenuItem\u003e\n        \u003cMenuItem\u003eCalendar\u003c/MenuItem\u003e\n      \u003c/Menu\u003e\n      \u003cMenu subHeading=\"OTHERS\"\u003e\n        \u003cSubmenu title=\"Menu Level\"\u003e\n          \u003cMenuItem\u003ePost\u003c/MenuItem\u003e\n          \u003cMenuItem\u003eDetails\u003c/MenuItem\u003e\n          \u003cSubmenu title=\"Level 2\"\u003e\n            \u003cMenuItem\u003enew\u003c/MenuItem\u003e\n            \u003cMenuItem\u003eHello\u003c/MenuItem\u003e\n          \u003c/Submenu\u003e\n        \u003c/Submenu\u003e\n\n        \u003cMenuItem\u003eChip\u003c/MenuItem\u003e\n        \u003cMenuItem target=\"_blank\" component={Link} link=\"https://google.com\"\u003e\n          External Link\n        \u003c/MenuItem\u003e\n      \u003c/Menu\u003e\n    \u003c/Sidebar\u003e\n  );\n};\n\nexport default App;\n```\n\n## API Reference\n\n#### Sidebar Api Reference\n\n```http\n  \u003cSidebar\u003e\u003c/Sidebar\u003e\n```\n\n| Props                 | Type       | Default          | Description                                           |\n| :-------------------- | :--------- | :--------------- | ----------------------------------------------------- |\n| `width`               | `string`   | `260px`          | set the width of sidebar                              |\n| `textColor`           | `string`   | `#2b2b2b`        | set this color to all MenuItem and SubMenu of sidebar |\n| `isCollapse`          | `boolean`  | `false`          | set the Sidebar to mini sidebar                       |\n| `themeColor`          | `string`   | `#5d87ff`        | set the theme primary color                           |\n| `themeSecondaryColor` | `string`   | `#49beff`        | set the theme secondary color                         |\n| `mode`                | `string`   | `light`          | set the mode of the Sidebar light or Dark             |\n| `direction`           | `string`   | `ltr`            | set the direction of Sidebar ltr or rtl               |\n| `userName`            | `string`   | `Mathew`         | set the user name of User Profile                     |\n| `designation`         | `string`   | `Designer`       | set the user designation of User Profile              |\n| `showProfile`         | `boolean`  | `true`           | show the user profile true or false                   |\n| `userimg`             | `string`   | `user image url` | set the image of user in User Profile                 |\n| `onLogout`            | `function` | `handleLogout`   | set the logout function for user logout               |\n\n#### Menu Api Reference\n\n```http\n  \u003cMenu\u003e\u003c/Menu\u003e\n```\n\n| Props        | Type     | Default | Description        |\n| :----------- | :------- | :------ | ------------------ |\n| `subHeading` | `string` | `menu`  | menu heading title |\n\n#### Submenu Api Reference\n\n```http\n  \u003cSubmenu\u003e\u003c/Submenu\u003e\n```\n\n| Props          | Type        | Default                               | Description                       |\n| :------------- | :---------- | :------------------------------------ | --------------------------------- |\n| `title`        | `string`    | `blank`                               | title of the submenu              |\n| `icon`         | `component` | `mui icon - \u003cFiberManualRecordIcon/\u003e` | set icon of submenu               |\n| `borderRadius` | `string`    | `8px`                                 | set border radius of Submenu      |\n| `textFontSize` | `string`    | `14px`                                | set text Font Size of the submenu |\n| `disabled`     | `boolean`   | `false`                               | enable/disable the Submenu        |\n\n#### MenuItem Api Reference\n\n```http\n  \u003cMenuItem\u003e\u003c/MenuItem\u003e\n```\n\n| Props            | Type        | Default                               | Description                                         |\n| :--------------- | :---------- | :------------------------------------ | --------------------------------------------------- |\n| `icon`           | `component` | `mui icon - \u003cFiberManualRecordIcon/\u003e` | set icon of menu item                               |\n| `link`           | `string`    | `#`                                   | pass link for component to redirect                 |\n| `component `     | `component` | `Link `                               | set react router link or nextjs Link to apply route |\n| `badge`          | `boolean`   | `false`                               | set the badge on menu items                         |\n| `badgeColor`     | `string`    | `primary`                             | set badge color                                     |\n| `badgeTextColor` | `string`    | `#ffffff`                             | set any badge text color                            |\n| `badgeContent`   | `string`    | `6`                                   | set content on badge                                |\n| `textFontSize`   | `string`    | `14px`                                | set font size of menu item                          |\n| `borderRadius`   | `string`    | `8px`                                 | set border radius of menu item                      |\n| `disabled`       | `boolean`   | `false`                               | enable/disable the menu item                        |\n| `badgeType`      | `string`    | `filled`                              | set badgeType of menu item filled or outlined       |\n| `target`         | `string`    | ``                                    | set target of menu item \\_blank                     |\n| `isSelected`     | `boolean`   | `false`                               | set selected menu item                              |\n\n#### Logo Api Reference\n\n```http\n  \u003cLogo\u003e\u003c/Logo\u003e\n```\n\n| Props        | Type        | Default    | Description                                         |\n| :----------- | :---------- | :--------- | --------------------------------------------------- |\n| `img`        | `string`    | `Logo url` | set the logo of the sidebar                         |\n| `href`       | `string`    | `set url`  | set any url you wanted to redirect                  |\n| `component ` | `component` | `Link `    | set react router link or nextjs Link to apply route |\n\n\n## 🔗 Related Sidebars\n \nLooking for a Tailwind CSS alternative to this Material UI-based sidebar?  \nExplore our companion package below:\n \n### [React Tailwind Sidebar](https://www.npmjs.com/package/react-tailwind-sidebar)\n \nA 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.\n \n---\n \n💡 Both `react-mui-sidebar` and `react-tailwind-sidebar` are crafted to simplify sidebar development — offering flexible layouts, effortless customization, and developer-friendly APIs.\n\n\n## Contributing\n\nContributions are always welcome!\n\nPlease adhere to this project's `code of conduct`.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadminmart%2Freact-mui-sidebar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadminmart%2Freact-mui-sidebar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadminmart%2Freact-mui-sidebar/lists"}