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

Category: React React Navigation & Menu | July 16, 2021
Author: azouaoui-med
Official Page: Go to website
Last Update: July 16, 2021
License: MIT

react pro side nav


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