DEV Community

Cover image for Slide into Style: 10 Must-Have React Sidebar NPM Packages
Hitesh Chauhan
Hitesh Chauhan

Posted on

Slide into Style: 10 Must-Have React Sidebar NPM Packages

#react #npm

Sidebars are essential for enhancing navigation and user experience in web applications. In React, there are numerous libraries available that offer robust and customizable sidebar solutions. Here’s a curated list of the 10 best React sidebar NPM packages, along with usage examples.

1. react-mui-sidebar

  • NPM: react-mui-sidebar
  • Description: Built with Material-UI, react-mui-sidebar provides a sleek and modern sidebar component that integrates seamlessly with other Material-UI components.
  • Screenshot:

react-mui-sidebar

  • Usage: 
npm install react-mui-sidebar
Enter fullscreen mode Exit fullscreen mode 
import React from "react";

import { Sidebar, Menu, MenuItem, Submenu, Logo } from "react-mui-sidebar";

const App = () => {
  return (
    <Sidebar width={"270px"}>
      <Logo img="https://adminmart.com/wp-content/uploads/2024/03/logo-admin-mart-news.png">
        AdminMart
      </Logo>
      <Menu subHeading="HOME">
        <MenuItem link="/" badge="true">
          Modern
        </MenuItem>
        <MenuItem>eCommerce</MenuItem>
        <MenuItem>Analytical</MenuItem>
      </Menu>
      <Menu subHeading="APPS">
        <MenuItem>Chat</MenuItem>
        <MenuItem>Calendar</MenuItem>
      </Menu>
      <Menu subHeading="OTHERS">
        <Submenu title="Menu Level">
          <MenuItem>Post</MenuItem>
          <MenuItem>Details</MenuItem>
          <Submenu title="Level 2">
            <MenuItem>new</MenuItem>
            <MenuItem>Hello</MenuItem>
          </Submenu>
        </Submenu>

        <MenuItem>Chip</MenuItem>
        <MenuItem target="_blank" link="google.com">
          External Link
        </MenuItem>
      </Menu>
    </Sidebar>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

2. react-sidebar

  • NPM: react-sidebar
  • Description: This package allows you to create a responsive sidebar that can slide in and out from the left or right.
  • Usage: 
npm install react-sidebar
Enter fullscreen mode Exit fullscreen mode 
import React, { useState } from 'react';
import Sidebar from 'react-sidebar';

const App = () => {
  const [sidebarOpen, setSidebarOpen] = useState(false);

  return (
    <Sidebar
      sidebar={<b>Sidebar content</b>}
      open={sidebarOpen}
      onSetOpen={setSidebarOpen}
    >
      <button onClick={() => setSidebarOpen(true)}>Open Sidebar</button>
    </Sidebar>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

3. react-burger-menu

  • NPM: react-burger-menu
  • Description: Provides a collection of animated sidebar styles that can be triggered with a hamburger icon.
  • Usage: 
npm install react-burger-menu
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { slide as Menu } from 'react-burger-menu';

const App = () => {
  return (
    <Menu>
      <a className="menu-item" href="/">Home</a>
      <a className="menu-item" href="/about">About</a>
      <a className="menu-item" href="/contact">Contact</a>
    </Menu>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

4. react-sidenav

  • NPM: react-sidenav
  • Description: A lightweight sidebar component that comes with a collapsible feature.
  • Usage: 
npm install react-sidenav
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { SideNav, Nav, NavItem } from 'react-sidenav';

const App = () => {
  return (
    <SideNav>
      <Nav>
        <NavItem>Home</NavItem>
        <NavItem>About</NavItem>
        <NavItem>Contact</NavItem>
      </Nav>
    </SideNav>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

5. react-sidebar-component

  • NPM: react-sidebar-component
  • Description: Provides a customizable sidebar that supports both fixed and sliding options.
  • Usage: 
npm install react-sidebar-component
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import Sidebar from 'react-sidebar-component';

const App = () => {
  return (
    <Sidebar>
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Contact</li>
      </ul>
    </Sidebar>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

6. react-drawer

  • NPM: react-drawer
  • Description: A minimalist sidebar component that supports swipe gestures for mobile devices.
  • Usage: 
npm install react-drawer
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import Drawer from 'react-drawer';
import 'react-drawer/lib/react-drawer.css';

const App = () => {
  return (
    <Drawer open={true}>
      <div>Drawer Content</div>
    </Drawer>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

7. react-responsive-sidebar 

npm install react-responsive-sidebar
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import ResponsiveSidebar from 'react-responsive-sidebar';

const App = () => {
  return (
    <ResponsiveSidebar>
      <div>Sidebar Content</div>
    </ResponsiveSidebar>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

8. react-navigation-drawer

  • NPM: react-navigation-drawer
  • Description: A drawer navigation solution part of the React Navigation library, great for React Native apps.
  • Usage: 
npm install @react-navigation/native @react-navigation/drawer
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="Home" component={HomeScreen} />
        <Drawer.Screen name="About" component={AboutScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

9. @mui/material

  • NPM: @mui/material
  • Description: While not exclusively a sidebar library, Material-UI's robust components include layout tools to create a sidebar.
  • Usage: 
npm install @mui/material @emotion/react @emotion/styled
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { Drawer, List, ListItem } from '@mui/material';

const App = () => {
  return (
    <Drawer variant="permanent">
      <List>
        <ListItem>Home</ListItem>
        <ListItem>About</ListItem>
        <ListItem>Contact</ListItem>
      </List>
    </Drawer>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

10. react-spring

  • NPM: react-spring
  • Description: This animation library can be utilized to enhance your sidebar's interactivity with smooth transitions.
  • Usage: 
npm install react-spring
Enter fullscreen mode Exit fullscreen mode 
import React from 'react';
import { useSpring, animated } from 'react-spring';

const App = () => {
  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <animated.div style={props}>
      <h1>Sidebar Content</h1>
    </animated.div>
  );
};

export default App;
Enter fullscreen mode Exit fullscreen mode

Conclusion

Choosing the right sidebar package for your React application depends on your design requirements and user experience goals. The packages listed above offer a range of features, styles, and customization options. Whether you prefer a minimalist design or a feature-rich sidebar, there's a solution here for everyone.

Experiment with a few of these options to find the perfect fit for your project and elevate your application's navigation experience!

Top comments (0)

Read next

kirbyaguilar profile image

Reusable form inputs with React Hook Form and TypeScript

Kirby Aguilar -

marwenshili profile image

Integrating CASL with React for Robust Authorization

Shili Mrawen -

poornima545 profile image

Getting started with react

Poornima Gowda -

anishamalde profile image

Journeying from React to React Native: Differences & Similarities

Anisha Malde -