https://github.com/bronsondunbar/library-navbar-component
Navbar component for React [NPM Package]
https://github.com/bronsondunbar/library-navbar-component
nodejs nodemodule react reactcomponent
Last synced: 25 days ago
JSON representation
Navbar component for React [NPM Package]
- Host: GitHub
- URL: https://github.com/bronsondunbar/library-navbar-component
- Owner: bronsondunbar
- Created: 2018-06-12T11:48:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-06-14T08:20:46.000Z (almost 8 years ago)
- Last Synced: 2025-06-10T17:54:43.684Z (12 months ago)
- Topics: nodejs, nodemodule, react, reactcomponent
- Language: CSS
- Homepage: https://bronsondunbar.com/navbar-component-for-react-npm-package/
- Size: 139 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Navbar Component
Navbar component for React
Install and save component as a dependency
```
npm install --save library-navbar-component
```
Import component into your app
```
import Navbar from 'library-navbar-component'
```
Create an array of objects with the keys being name, route and items
```
const navBarData = [
{
name: "Navbar",
route: "/",
items: [
{
name: "Item 1",
route: "/",
items: [
{
name: "Sub item 1",
route: "/"
}
]
},
{
name: "Item 2",
route: "/"
},
{
name: "Item 3",
route: "/",
items: [
{
name: "Sub item 3",
route: "/"
}
]
},
]
},
]
```
Create and assign navbar content state with a false value
```
constructor(props) {
super(props)
this.state = {
navBarContent: false
}
}
```
Create the function that will show navbar options
```
showNavBarOptions (event) {
var elems = document.querySelectorAll(".nav-item > .dropdown-menu");
[].forEach.call(elems, function(el) {
el.classList.remove("show")
})
let hasOptions = event.target.nextSibling.childNodes.length
if (hasOptions > 0) {
event.target.nextSibling.classList.toggle("show")
}
}
```
Create the function that will hide navbar options
```
hideNavBarOptions (event) {
var elems = document.querySelectorAll(".nav-item > .dropdown-menu");
[].forEach.call(elems, function(el) {
el.classList.remove("show")
})
}
```
Create the function that will show navbar content
```
showNavBarContent (event) {
event.preventDefault()
this.setState({
navBarContent: !this.state.navBarContent
})
}
```
Create the function that will hide navbar content
```
hideNavBarContent (event) {
event.preventDefault()
this.setState({
navBarContent: !this.state.navBarContent
})
}
```
Render the component with the functions we created as well as any other props that are needed
```
render () {
const navBarData = [
{
name: "Navbar",
route: "/",
items: [
{
name: "Item 1",
route: "/",
items: [
{
name: "Sub item 1",
route: "/"
}
]
},
{
name: "Item 2",
route: "/"
},
{
name: "Item 3",
route: "/",
items: [
{
name: "Sub item 3",
route: "/"
}
]
},
]
},
]
return (
)
}
```
| Prop | Values |
| :---------------- | :------------------------- |
| navBarData | Object |
| navBarBrand | Image |
| navBarTheme | light or dark |
| navBarContent | navBarContent state |
| showNavBarContent | showNavBarContent function |
| hideNavBarContent | hideNavBarContent function |
| showNavBarOptions | showNavBarOptions function |
| hideNavBarOptions | hideNavBarOptions function |
* Font Awesome needs to included in project