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

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>;

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

Flatlogic Admin Templates banner

Leave a Reply

Your email address will not be published. Required fields are marked *