Customizable Mobile-friendly Side Menu – React Pro Sidebar

This is a customizable and responsive React sidebar library with dropdown menus and unlimited number of nested submenus.

Install & Import:

# NPM
$ npm i react-pro-sidebar –save

import { ProSidebar, Menu, MenuItem, SubMenu } from ‘react-pro-sidebar’;
import ‘react-pro-sidebar/dist/css/styles.css’;

Basic Usage:

<ProSidebar>
  <Menu iconShape="square">
    <MenuItem icon={<FaGem />}>Home</MenuItem>
    <SubMenu title="Components" icon={<FaHeart />}>
      <MenuItem>Menu Item 1</MenuItem>
      <MenuItem>Menu Item 2</MenuItem>
      <MenuItem>Menu Item 3</MenuItem>
      ...
    </SubMenu>
  </Menu>
</ProSidebar>;

Available Props:

// is collapsed on load
collapsed?: boolean;

// RTL mode
rtl?: boolean;

// is toggled
toggled?: boolean;

// sidebar width
width?: string | number;

// with background image
image?: string;

// classname
className?: string;

// child nodes
children?: React.ReactNode;

// breakpoint
breakPoint?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';

// onToggle function
onToggle?: (value: boolean) => void;

Preview:

Customizable Mobile-friendly Side Menu - React Pro Sidebar

Download Details:

Author: azouaoui-med

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/azouaoui-med/react-pro-sidebar

License: MIT

You Might Be Interested In:

Add Comment