Full Responsive Side Navigation For React using react-pro-sidebar


A fully customizable and responsive side navigation component for React, which comes with drop-down menus, nested sub-menu etc. This component is used by thousands of apps.


RTL support.
Unlimited number of nested sub menus.
Fully customizable as per your need.
Supports drop-down menus.
Supports custom styling.

How to use it?

1. You will need to install the component using npm or yarn.

npm install react-pro-sidebar

yarn add react-pro-sidebar

2. Import the side navigation component, like this:

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

3. React code to create side menu.

<Menu iconShape=”square”>
<MenuItem icon={<FaGem />}>Dashboard</MenuItem>
<SubMenu title=”Components” icon={<FaHeart />}>
<MenuItem>Component 1</MenuItem>
<MenuItem>Component 2</MenuItem>

4. If you want then, you can create sidebar layout.

import { ProSidebar, SidebarHeader, SidebarFooter, SidebarContent } from ‘react-pro-sidebar’;

* You can add a header for the sidebar ex: logo
* You can add the content of the sidebar ex: menu, profile details, …
* You can add a footer for the sidebar ex: copyright

The post Full Responsive Side Navigation For React using react-pro-sidebar appeared first on Lipku.com.

Flatlogic Admin Templates banner