Contents
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.