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

Menu Items Props

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.