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

Description:

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.

Features:

  • 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
npm install react-pro-sidebar

#yarn
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.

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

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

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

<ProSidebar>
  <SidebarHeader>
    {/**
     *  You can add a header for the sidebar ex: logo
     */}
  </SidebarHeader>
  <SidebarContent>
    {/**
     *  You can add the content of the sidebar ex: menu, profile details, ...
     */}
  </SidebarContent>
  <SidebarFooter>
    {/**
     *  You can add a footer for the sidebar ex: copyright
     */}
  </SidebarFooter>
</ProSidebar>;