react-pro-sidebar v2

Modern Sidebars for React

The ultimate sidebar component for React applications. Highly customizable, fully responsive, and effortless to integrate into any dashboard.

Get Started →Try the Playground

App.jsx

import { Sidebar, Menu, MenuItem, SubMenu } from 'react-pro-sidebar';
import { Diamond } from './icons';

export default function App() {
  return (
    <Sidebar collapsed={collapsed}>
      <Menu>
        <MenuItem icon={<Diamond />}>
          Dashboard
        </MenuItem>
        <SubMenu label="Charts">
          <MenuItem>Pie</MenuItem>
          <MenuItem>Line</MenuItem>
        </SubMenu>
      </Menu>
    </Sidebar>
  );
}

Quick Start

Get started with React Pro Sidebar in just a few lines of code. Install the package and start building your navigation interface.

npm install react-pro-sidebar

import { Sidebar, Menu, MenuItem } from 'react-pro-sidebar';
 
function App() {
  return (
    <Sidebar>
      <Menu>
        <MenuItem> Dashboard </MenuItem>
        <MenuItem> Calendar </MenuItem>
      </Menu>
    </Sidebar>
  );
}

Built for Performance and Flexibility

Everything you need to build powerful navigation interfaces.

Highly Customizable

Tailor every aspect of the sidebar — from custom themes and icons to nested menu structures and transition speeds. Full control over styling via rootStyles and menuItemStyles.

Responsive by Default

Native support for mobile breakpoints, drawer modes, and collapsible states that adapt to any screen size. Built-in responsive behavior with the breakPoint prop.

Accessible

Keyboard navigation, aria-expanded / aria-current wired up, focus management for overlay sidebars, and Escape-to-close out of the box.

Developer Experience

Excellent TypeScript support, comprehensive documentation, and intuitive API design. Tree-shakeable, with proper ESM + CJS + types.

Explore

Installation — Add the package and try the basic example.
Components — Detailed reference for every component and prop.
Examples — Dashboard layout, React Router, theming, Next.js.
Playground — Toggle props live in the browser.
Migration Guide — Step-by-step upgrade from v1 to v2.