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

gav_o profile image

UI Verse

Gav -

gcizman profile image

How to solve this problem in nodejs?

Gcobani Mkontwana -

ellis22 profile image

Spec Coder: The Ultimate VS Code Extension for Smarter, Faster Coding

Ellis -

ngoantr profile image

opensslErrorStack: [ ‘error:03000086:digital envelope routines::initialization error’ ]

Ann -