react-navbar-menu

react-navbar-menu

Powered by BigYusufff. Check some of my awesome projects out https://yusuflateef.vercel.app/

Install

Usage

With linear-gradient

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

Without linear-gradient (with ActiveColor)

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

Compatibility

IE / Edge	Firefox	Chrome	Safari	Electron
IE11, Edge	last 2 versions	last 2 versions	last 2 versions	last 2 versions

General Props

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"

Menu Items Props

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.

Installation

  npm install react-navbar-menu

Live Examples

https://ri4w0d.csb.app/

More Info

https://yusuflateefblog.vercel.app/post/react-navbar-menu

Code Installation

  npm install

License

react-navbar-menu is released under the MIT license.