mui-react-sidebar

A fully customizable and theme-aware sidebar navigation component for React and Material-UI (MUI).

This package helps you easily integrate a sidebar menu into your React applications with support for:

• Dynamic menu configuration
• Nested navigation
• MUI theme support
• Custom styling through theme overrides

Screenshot

✨ Features

• ⚙️ Dynamic Sidebar Configuration using JS objects
• 🎨 MUI Theme Integration (supports light/dark mode)
• 🧩 Multi-level Nested Menus
• 💡 Custom Theming via createTheme
• 📦 Easy integration into existing React + MUI projects
• 🚀 Simple Navigation Handling via callback handleNavigation

---

🚀 Installation

npm install mui-react-sidebar

or

yarn add mui-react-sidebar

📦 Usage

import React from 'react'
import Sidebar from 'mui-react-sidebar'
import 'mui-react-sidebar/dist/styles.css'

import {
  Home as HomeIcon,
  Apps as AppsIcon,
  Public as PublicIcon,
  Contacts as ContactsIcon,
  People as PeopleIcon,
  MarkUnreadChatAlt as MarkUnreadChatAltIcon,
  NoteAlt as NoteAltIcon,
  Storefront as StorefrontIcon,
} from '@mui/icons-material'

const menuItems = [
  {
    title: 'Home',
    icon: <HomeIcon color="error" />,
    badge: 'New',
    path: '/',
  },
  {
    title: 'Apps',
    icon: <AppsIcon />,
    path: '/apps',
  },
  {
    title: 'Web',
    icon: <PublicIcon />,
    children: [
      {
        title: 'News',
        path: '/news',
      },
      {
        title: 'Blog',
        children: [
          {
            title: 'Posts',
            children: [
              {
                title: 'Posts-1',
                path: '/post-1',
              },
            ],
          },
        ],
      },
    ],
  },
  {
    title: 'Contacts',
    icon: <ContactsIcon />,
    badge: '2',
    path: '/about',
  },
  {
    title: 'Users',
    icon: <PeopleIcon />,
    path: '/users',
  },
  {
    title: 'Chats',
    icon: <MarkUnreadChatAltIcon />,
    badge: 5,
    path: '/chats',
  },
  {
    title: 'Notes',
    icon: <NoteAltIcon />,
    path: '/notes',
  },
  {
    title: 'eCommerce',
    icon: <StorefrontIcon />,
    path: '/ecommerce',
  },
]

export default function App() {
  return (
    <Sidebar
      data={menuItems}
      logo={<WhatshotIcon color="primary" fontSize="large" />}
      title="Admin Panel"
      handleNavigation={(path) => handleNavigationChange(path)}
    />
  )
}

🎨 Theme Integration

By default, the sidebar styling pulls values from the MUI theme:

Element	Theme Reference
Text Color	theme.palette.text.primary
Sidebar Background	theme.palette.background.default
Selected Item Background	theme.palette.action.selected
Selected Text Color	theme.palette.primary.main

🧑‍🎨 Custom Theme Overrides

To customize the sidebar styling, extend your MUI theme using createTheme() and pass custom values under theme.custom.sidebar.

import { createTheme, ThemeProvider } from '@mui/material/styles'

const theme = createTheme({
  ...existingTheme,
  custom: {
    sidebar: {
      width: 270,
      background: '#5BE49B',
      color: 'white',
      badgeBgColor: 'rgb(22, 89, 90)',
      badgeColor: 'red',
      selected: 'yellow',
    },
  },
})

<ThemeProvider theme={theme}>
  <App />
</ThemeProvider>

🧾 Custom Theme Properties

Property	Description	Default
width	Sidebar width in pixels	270
background	Background color of sidebar	theme.palette.background.default
color	Text color in sidebar	theme.palette.text.primary
badgeBgColor	Background color of badge	MUI default
badgeColor	Text color of badge	MUI default
selected	Background color of selected item	theme.palette.action.selected
menuIconTop	Set menu icon top position	10

🛠️ Custom Theming

This component supports full customization through MUI's createTheme system by extending the default MUI Theme interface.

If you want to define your own sidebar theme values (e.g., colors, background, etc.), you can add custom typings like below:

// theme.d.ts or any global type declaration file
import '@mui/material/styles'

declare module '@mui/material/styles' {
  interface Theme {
    custom: {
      sidebar: {
        width: number
        background: string
        color: string
        badgeColor: string
        badgeBgColor: string
        selected: string
        menuIconTop: number
      }
    }
  }

  interface ThemeOptions {
    custom?: {
      sidebar?: {
        width?: number
        background?: string
        collapsedWidth?: number
        color?: string
        badgeColor?: string
        badgeBgColor?: string
        selected?: string
        menuIconTop?: number
      }
    }
  }
}

🏁 Final Notes

• Supports React 18+ and MUI v5+
• Designed for dashboards, admin panels, and CMS interfaces
• Automatically adapts to MUI theme (light/dark)

📄 License

MIT © 2025