Powered by BigYusufff. Check some of my awesome projects out https://yusuflateef.vercel.app/
import React from 'react'
import { Navbar } from 'react-navbar-menu'
const Header = () => {
return (
<div>
<Navbar IconColor={'yellow'} MenuNumber={4} Center={true} Position={'bottom'}
url1={'#home'}icon1={"bx bx-home-alt"}
url2={'#aboutme'}icon2={"bx bx-book-alt"}
url3={'/contact'}icon3={"bx bx-user"}
url4={'#skills'}icon4={"bx bx-pin"}
backgroundColor={"#151c28"} degree={`to bottom`}
gradcolor1={'#a595e9'} gradcolor2={'#a595e933'}/>
</div>
)
}
export default Header
import React from 'react'
import { Navbar } from 'react-navbar-menu'
const Header = () => {
return (
<div>
<Navbar IconColor={'yellow'} MenuNumber={4} Position={'bottom'}
url1={'#home'}icon1={"bx bx-home-alt"} Center={true}
url2={'#aboutme'}icon2={"bx bx-book-alt"}
url3={'/contact'}icon3={"bx bx-user"}
url4={'#skills'}icon4={"bx bx-pin"}
backgroundColor={"#151c28"} activeColor={'#a595e9'} />
</div>
)
}
export default Header
IE / Edge |
Firefox |
Chrome |
Safari |
Electron |
---|---|---|---|---|
IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
name | type | default | description |
---|---|---|---|
Position | String | "Top" | Specify the position of the component. "Top" or "top" or "Bottom" |
Center | Boolean | false | Choose to center the compenent true or false |
borderRadius | Number | 64 | {Optional} Specify the border-radius |
Width | Number | {Optional} Specify the width of component | |
backgroundColor | String | "" | Specify the background color for the menu/ navbar menu e.g. "blue","#a595e9" |
name | type | default | description |
---|---|---|---|
MenuNumber | Number | The MenuNumber denotes 'how many menu-items you want. Although Maximum is 5 and minimum is 1' | |
Font | Number | {optional}Specify the font-size. As the icons increase and decrease, Height will adjust automatically but Width will need to be adjusted maually | |
IconColor | String | "" | Specify the color for the menu items/ navbar menu items e.g. "blue","#a595e9" |
activeColor | String | "" | Specify the background color for the active menu items/ navbar menu items e.g. "blue","#a595e9" |
activeIconColor | String | "" | Specify the color for the menu item/ navbar menu item e.g. "blue","#a595e9" |
degree | String | "" | {Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "to left", "to right", "to bottom left" etc. |
gradcolor1 | String | "" | {Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "blue" etc. |
gradcolor2 | String | "" | {Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "green" etc. |
icon1, icon2... icon5 | String | "" | Specify the name of the icon for each specific icon number(icon1, icon2) for the menu item/ navbar menu items. e.g. "bx bx-home", "fa fa-house" etc. |
url1, url2... url5 | String | "" | Specify the name of the url for each specific url number(url1, url2) for the menu item/ navbar menu items. e.g. "/", "#contact" etc. |
npm install react-navbar-menu
https://yusuflateefblog.vercel.app/post/react-navbar-menu
npm install
react-navbar-menu is released under the MIT license.