react-pro-sidebar (1.1.0)

2026-02-24T14:03:58Z

Setup this registry in your project .npmrc file:

registry=

To install the package using npm, run the following command:

npm install react-pro-sidebar@1.1.0

or add it to the package.json file:

"react-pro-sidebar": "1.1.0"

For more information on the npm registry, see the documentation.

React Pro Sidebar

React Pro Sidebar provides a set of components for creating high level and customizable side navigation

Old versions

v0.x

Live Preview

Screenshot

Installation

yarn

yarn add react-pro-sidebar

npm

npm install react-pro-sidebar

Usage

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';

<Sidebar>
  <Menu>
    <SubMenu label="Charts">
      <MenuItem> Pie charts </MenuItem>
      <MenuItem> Line charts </MenuItem>
    </SubMenu>
    <MenuItem> Documentation </MenuItem>
    <MenuItem> Calendar </MenuItem>
  </Menu>
</Sidebar>;

Using React Router

You can make use of the component prop to integrate React Router link

Example Usage

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
import { Link } from 'react-router-dom';

<Sidebar>
  <Menu
    menuItemStyles={{
      button: {
        // the active class will be added automatically by react router
        // so we can use it to style the active menu item
        [`&.active`]: {
          backgroundColor: '#13395e',
          color: '#b6c8d9',
        },
      },
    }}
  >
    <MenuItem component={<Link to="/documentation" />}> Documentation</MenuItem>
    <MenuItem component={<Link to="/calendar" />}> Calendar</MenuItem>
    <MenuItem component={<Link to="/e-commerce" />}> E-commerce</MenuItem>
  </Menu>
</Sidebar>;

Customization

We provide for each component rootStyles prop that can be used to customize the styles

its recommended using utility classes (sidebarClasses, menuClasses) for selecting target child nodes

Example usage

<Sidebar
  rootStyles={{
    [`.${sidebarClasses.container}`]: {
      backgroundColor: 'red',
    },
  }}
>
  // ...
</Sidebar>

For Menu component, in addition to rootStyles you can also use menuItemStyles prop for customizing all MenuItem & SubMenu components and their children

Type definition

interface MenuItemStyles {
  root?: ElementStyles;
  button?: ElementStyles;
  label?: ElementStyles;
  prefix?: ElementStyles;
  suffix?: ElementStyles;
  icon?: ElementStyles;
  subMenuContent?: ElementStyles;
  SubMenuExpandIcon?: ElementStyles;
}

type ElementStyles = CSSObject | ((params: MenuItemStylesParams) => CSSObject | undefined);

Example usage

<Sidebar>
  <Menu
    menuItemStyles={{
      button: ({ level, active, disabled }) => {
        // only apply styles on first level elements of the tree
        if (level === 0)
          return {
            color: disabled ? '#f5d9ff' : '#d359ff',
            backgroundColor: active ? '#eecef9' : undefined,
          };
      },
    }}
  >
    //...
  </Menu>
</Sidebar>

API

Component	Prop	Type	Description	Default
Sidebar	defaultCollapsed	`boolean`	Initial collapsed status	`false`
	collapsed	`boolean`	Sidebar collapsed state	`false`
	toggled	`boolean`	Sidebar toggled state	`false`
	width	`number \| string`	Width of the sidebar	`270px`
	collapsedWidth	`number \| string`	Width of the sidebar on collapsed state	`80px`
	backgroundColor	`string`	Set background color for sidebar	`rgb(249, 249, 249, 0.7)`
	image	`string`	Url of the image to use in the sidebar background, need to apply transparency to background color	-
	breakPoint	`xs` \| `sm` \| `md` \| `lg` \| `xl` \| `xxl` \| `all`	Set when the sidebar should trigger responsiveness behavior	-
	customBreakPoint	`string`	Set custom breakpoint value, this will override breakPoint prop	-
	transitionDuration	`number`	Duration for the transition in milliseconds to be used in collapse and toggle behavior	`300`
	rtl	`boolean`	RTL direction	`false`
	rootStyles	`CSSObject`	Apply styles to sidebar element	-
	onBackdropClick	`() => void`	Callback function to be called when backdrop is clicked	-
Menu	closeOnClick	`boolean`	If `true` and sidebar is in collapsed state, submenu popper will automatically close on MenuItem click	`false`
	menuItemStyles	`MenuItemStyles`	Apply styles to MenuItem and SubMenu components and their children	-
	renderExpandIcon	`(params: { level: number; collapsed: boolean; disabled: boolean; active: boolean; open: boolean; }) => React.ReactNode`	Render method for customizing submenu expand icon	-
	transitionDuration	`number`	Transition duration in milliseconds to use when sliding submenu content	`300`
	rootStyles	`CSSObject`	Apply styles from Menu root element	-
MenuItem	icon	`ReactNode`	Icon for the menu item	-
	active	`boolean`	If `true`, the component is active	`false`
	disabled	`boolean`	If `true`, the component is disabled	-
	prefix	`ReactNode`	Add a prefix to the menuItem	-
	suffix	`ReactNode`	Add a suffix to the menuItem	-
	component	`string \| ReactElement`	A component used for menu button node, can be string (ex: 'div') or a component	-
	rootStyles	`CSSObject`	Apply styles to MenuItem element	-
SubMenu	label	`string \| ReactNode`	Label for the submenu	-
	icon	`ReactNode`	Icon for submenu	-
	defaultOpen	`boolean`	Set if the submenu is open by default	`false`
	open	`boolean`	Set open value if you want to control the state	-
	active	`boolean`	If `true`, the component is active	`false`
	disabled	`boolean`	If `true`, the component is disabled	-
	prefix	`ReactNode`	Add a prefix to the submenu	-
	suffix	`ReactNode`	Add a suffix to the submenu	-
	onOpenChange	`(open: boolean) => void`	Callback function called when submenu state changes	-
	component	`string \| React.ReactElement`	A component used for menu button node, can be string (ex: 'div') or a component	-
	rootStyles	`CSSObject`	Apply styles to SubMenu element	-

License

MIT © Mohamed Azouaoui

Dependencies

ID	Version
@emotion/react	^11.10.5
@emotion/styled	^11.10.5
@popperjs/core	^2.11.6
classnames	^2.3.2

Development Dependencies

ID	Version
@babel/core	^7.16.0
@babel/preset-env	^7.16.4
@babel/preset-react	^7.16.0
@rollup/plugin-commonjs	^21.1.0
@rollup/plugin-node-resolve	^13.3.0
@storybook/addon-essentials	^6.4.7
@storybook/react	^6.4.7
@testing-library/jest-dom	^5.16.5
@testing-library/react	^13.4.0
@testing-library/user-event	^14.4.3
@types/jest	^27.0.3
@types/react	^18.0.25
@types/react-dom	^18.0.9
@typescript-eslint/eslint-plugin	^5.5.0
@typescript-eslint/parser	^5.5.0
babel-jest	^27.4.2
eslint	^8.4.0
eslint-config-airbnb	^19.0.2
eslint-config-airbnb-typescript	^16.1.0
eslint-config-prettier	^8.3.0
eslint-import-resolver-typescript	^2.5.0
eslint-plugin-import	^2.25.3
eslint-plugin-jest-dom	^3.9.2
eslint-plugin-jsx-a11y	^6.5.1
eslint-plugin-prettier	^4.0.0
eslint-plugin-react	^7.27.1
eslint-plugin-react-hooks	^4.3.0
eslint-plugin-testing-library	^5.0.1
gh-pages	^4.0.0
husky	^7.0.0
jest	^27.4.3
lint-staged	>=10
prettier	^2.5.1
react	^18.2.0
react-dom	^18.2.0
rimraf	^3.0.2
rollup	^2.79.1
rollup-plugin-peer-deps-external	^2.2.4
rollup-plugin-typescript2	^0.31.2
typescript	^4.5.2

Peer Dependencies

ID	Version
react	>=16.8.0
react-dom	>=16.8.0

react-component react-sidebar layout sidebar menu submenu component collapsed rtl

Details

npm

2026-02-24 14:03:58 +00:00

1

Mohamed Azouaoui

Project Site

MIT

latest

100 KiB

Assets (1)

react-pro-sidebar-1.1.0.tgz 100 KiB

Versions (1) View all

1.1.0

2026-02-24

react-pro-sidebar (1.1.0)

Installation

About this package

React Pro Sidebar

Old versions

Live Preview

Screenshot

Installation

yarn

npm

Usage

Using React Router

Customization

API

License

Dependencies

Keywords