goranivankovic / react-nscoder-navbar

Live Example OF Responsive Navbar

Home Page:https://goranivankovic.github.io/react-nscoder-navbar/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

React Responsive navbar with props

react-nscoder-navbar is a React component to build a simple and responsive navbar with hamburger menu to mobile screens

Installation

Use the npm package manager to install react-nscoder-navbar

npm install react-nscoder-navbar  --save

Responsive navbar with props.
Simple and light npm package.
Technologies use: react, react-hooks, CSS.
Don't waste your time building your own navbar, just simple downloaded with npm.
Required: Node.js, NPM, React.
I hope you liked and feel happy to enjoy and download.


Navbar default position is fixed top
Z-index is 10
<!-- position: fixed;
top: 0%;
left: 0%;
width: 100%;
 -->

Usage

import React from 'react';


//Import SideBar from react-nscoder-navbar
import SideBar from 'react-nscoder-navbar'

//Import Css File in Your Component from node_modules/react-nscoder-navbar/App.css. 
// Be aware of your path,it depends where you're component is.

import '../node_modules/react-nscoder-navbar/App.css'






function App() {
  return (
    <div>
  
  
<SideBar


  //Change Background Color
   
   bgColor="transparent"


   //Change Logo name
    logo="Apple"


   //Change Logo Color
    logoColor='grey'


  //Change Text color of nav items
   textColor='grey'


  //Change Text color of nav items on hover
   textColorHover="red"
   

  //Change Bar color 
   barsColor="grey"
   
 
 //Change Menu items name Minimum-2 items, Max-6 items. 
 //Opitmal is to have 3-6 names Menu items.
//Automatic nav routes will be named like menu items
//Give id of div id of menu items but lowercase

   menuItems={[["Home",false],["About",false] ,["Skills",false] ,["Projects",false] ,["Products",true] ,["Contact",true] ,]}


   
  
    />


    </div>
  )
}

export default App



GitHubhttps://github.com/goranivankovic/react-nscoder-navbar


GitHub

https://www.npmjs.com/package/react-nscoder-navbar

## License

MIT



developed

About

Live Example OF Responsive Navbar

https://goranivankovic.github.io/react-nscoder-navbar/