Skip to content

BigYusuf/menu-lib

Repository files navigation

react-navbar-menu


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

NPM version dumi build status Coverage Status npm download bundle size

Install

react-navbar-menu

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
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
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.