react-nscoder-navbar is a React component to build a simple and responsive navbar with hamburger menu to mobile screens
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
Z-index is 10
<!-- position: fixed;
top: 0%;
left: 0%;
width: 100%;
-->
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
https://github.com/goranivankovic/react-nscoder-navbar
https://www.npmjs.com/package/react-nscoder-navbar
## License