overlay-navbar

Navbar component built with React.

DEMO

click Here to try demo

Installation

npm install overlay-navbar

In order to use overlay-navbar, you have to install react-icons and react-router-dom

for react-icons npm install react-icons for react-router-dom npm install react-router-dom

Docs

Step 1 In App.js, import {BrowserRouter as Router} from "react-router-dom" and Wrap everything inside of <Router> </Router>

Step 2

import {ReactNavbar} from "overlay-navbar"

Step 3

add ReactNavbar Component in your file while passing appropriate props

<ReactNavbar />

Parameters

| Parameter | Default | Description | | ------------------------ | ---------------------------------- | -------------------------------------------------------------------- | | burgerColor | "black" | 'This is to change the color of burger menu button' | | burgerColorHover | "burgerColor" | "This is to change the color of burger menu button at the of hover " | | navColor1 | "rgb(35, 35, 35)" | "This is to set the color of first nav section | | navColor2 | "navColor1" | "This is to set the color of second nav section | | navColor3 | "navColor2" | "This is to set the color of third nav section | | navColor4 | "navColor3" | "This is to set the color of fourth nav section | | logo | "no default value, **required**" | "To set the Logo in Navbar" | | logoWidth | "100px" | "To set the width of Logo" | | logoHeight | "unset" | "To set the height of Logo" | | logoHoverSize | "15px" | "To set the drop-shadow blur at the time of hover" | | logoHoverColor | "green" | "To set the drop-shadow Color at the time of hover" | | logoTransition | 0.5 | "To set Logo Transition" | | logoAnimationTime | 1 | "To set Logo Animation time, 1 means 1second" | | nav1FlexDirection | "row" | "To set Flex Direction of first nav section" | | nav2FlexDirection | "row" | "To set Flex Direction of second nav section" | | nav3FlexDirection | "row" | "To set Flex Direction of third nav section" | | nav4FlexDirection | "row" | "To set Flex Direction of fourth nav section" | | nav1alignItems | "center" | "To set Align Item of first nav section" | | nav2alignItems | "center" | "To set Align Item of second nav section" | | nav3alignItems | "center" | "To set Align Item of third nav section" | | nav4alignItems | "center" | "To set Align Item of fourth nav section" | | nav1justifyContent | "center" | "To set Justify Content of first nav section" | | nav2justifyContent | "center" | "To set Justify Content of second nav section" | | nav3justifyContent | "center" | "To set Justify Content of third nav section" | | nav4justifyContent | "center" | "To set Justify Content of fourth nav section" | | nav1Transition | 0.4 | "To set Transition of first nav section" | | nav2Transition | nav1Transition + 0.4 | "To set Transition of second nav section" | | nav3Transition | nav2Transition + 0.4 | "To set Transition of third nav section" | | nav4Transition | nav3Transition + 0.4 | "To set Transition of fourth nav section" | | link1Text | "Text 1" | "To set the Text of first Link" | | link2Text | "Text 2" | "To set the Text of second Link" | | link3Text | "Text 3" | "To set the Text of third Link" | | link4Text | "Text 4" | "To set the Text of fourth Link" | | link1Url | "/text1" | "To set the Url of first Link" | | link2Url | "/text2" | "To set the Url of second Link" | | link3Url | "/text3" | "To set the Url of third Link" | | link4Url | "/text4" | "To set the Url of fourth Link" | | link1Size | "1vmax" | "To set the size of first Link Text" | | link2Size | "link1Size" | "To set the size of second Link Text" | | link3Size | "link2Size" | "To set the size of third Link Text" | | link4Size | "link3Size" | "To set the size of fourth Link Text" | | link1Family | "Roboto" | "To set the Family of first Link" | | link2Family | "link1Family" | "To set the Family of second Link" | | link3Family | "link2Family" | "To set the Family of third Link" | | link4Family | "link3Family" | "To set the Family of fourth Link" | | link1Color | "black" | "To set the Color of first Link" | | link2Color | "link1Color " | "To set the Color of second Link" | | link3Color | "link2Color " | "To set the Color of third Link" | | link4Color | "link3Color " | "To set the Color of fourth Link" | | link1BackgroundColor | "unset" | "To set the Background color of first Link" | | link2BackgroundColor | "unset" | "To set the Background color of second Link" | | link3BackgroundColor | "unset" | "To set the Background color of third Link" | | link4BackgroundColor | "unset" | "To set the Background color of fourth Link" | | link1ColorHover | "link1Color" | "To set the color of first Link at the time of Hover" | | link2ColorHover | "link1ColorHover" | "To set the color of second Link at the time of Hover" | | link3ColorHover | "link2ColorHover " | "To set the color of third Link at the time of Hover" | | link4ColorHover | "link3ColorHover " | "To set the color of fourth Link at the time of Hover" | | link1Decoration | "none" | "To set text decoration of first Link" | | link2Decoration | "link1Decoration | "To set text decoration of second Link" | | link3Decoration | "link2Decoration" | "To set text decoration of third Link" | | link4Decoration | "link3Decoration" | "To set text decoration of fourth Link" | | link1Margin | "0" | "To set margin of first Link" | | link2Margin | "link1Margin " | "To set margin of second Link" | | link3Margin | "link2Margin " | "To set margin of third Link" | | link4Margin | "link3Margin " | "To set margin of fourth Link" | | link1Padding | "0" | "To set padding of first Link" | | link2Padding | "link1Padding" | "To set padding of first Link" | | link3Padding | "link2Padding" | "To set padding of second Link" | | link4Padding | "link3Padding " | "To set padding of third Link" | | link1Border | "none" | "To set border of first Link" | | link2Border | "link1Border" | "To set border of second Link" | | link3Border | "link2Border" | "To set border of third Link" | | link4Border | "link3Border" | "To set border of fourth Link" | | link1Transition | 0.5 | "To set transition of first Link" | | link2Transition | link1Transition | "To set transition of second Link" | | link3Transition | link2Transition | "To set transition of third Link" | | link4Transition | link3Transition | "To set transition of fourth Link" | | link1AnimationTime | 1.5 | "To set Animation Time of first Link" | | link2AnimationTime | link1AnimationTime | "To set Animation Time of second Link" | | link3AnimationTime | link2AnimationTime | "To set Animation Time of third Link" | | link4AnimationTime | link3AnimationTime | "To set Animation Time of fourth Link" | | searchIcon | true | "To set Search Icon to true or false"
SearchIconElement| "no default value, **required**" | "Pass Search Icon Here" | cartIcon | true | "To set Cart Icon to true or false" | CartIconElement| "no default value, **required**" | "Pass Cart Icon Here" | profileIcon | true | "To set Profile Icon to true or false"
ProfileIconElement| "no default value, **required**" | "Pass Profile Icon Here" | | searchIconMargin | "0" | "To set Search Icon margin" | | cartIconMargin | "0" | "To set Cart Icon margin" | | profileIconMargin | "0" | "To set Profile Icon margin" | | searchIconUrl | "/search" | "To set Search Icon Url" | | cartIconUrl | "/cart" | "To set Cart Icon Url" | | profileIconUrl | "/account" | "To set Profile Icon Url" | | searchIconSize | "2vmax" | "To set the size of Search Icon" | | cartIconSize | "2vmax" | "To set the size of Cart Icon" | | profileIconSize | "2.5vmax" | "To set the size of profile Icon" | | searchIconColor | "white" | "To set the Color of Search Icon" | | cartIconSize | "white" | "To set the Color of Cart Icon" | | profileIconColor | "white" | "To set the Color of profile Icon" | | searchIconColorHover | "searchIconColor" | "To set the Color of Search Icon at the time of hover" | | cartIconColorHover | "cartIconColor" | "To set the Color of Cart Icon at the time of hover" | | profileIconColorHover | "profileIconColor" | "To set the Color of Profile Icon at the time of hover" | | searchIconTransition | 0.5 | "To set the transition of Search Icon" | | cartIconTransition | 0.5 | "To set the transition of Cart Icon" | | profileIconTransition | 0.5 | "To set the transition of Profile Icon" | | searchIconAnimationTime | 2 | "To set the Animation time of Search Icon" | | cartIconAnimationTime | searchIconAnimationTime + 0.5 | "To set the Animation time of Cart Icon" | | profileIconAnimationTime | cartIconAnimationTime + 0.5 | "To set the Animation time of profile Icon" |

Please Must Install react-router-dom and react-icons before using this Module

Created By @meabhisingh

My name is Abhishek Singh, a.k.a 6 pack programmer on YouTube.

Youtube - Click Here Instagram - Click Here

LinkedIn - Click