A plug and play navigation bar which handles everything through props.
it is fairly simple but is responsive and can have drop downs if required. The Component should ideally be loaded directly from the Router as shown in the example.
`npm i reactjs-navigation --save`
import React from 'react'
import {
BrowserRouter as Router,
} from 'react-router-dom'
import NavBarNPM from 'reactjs-navigation'
export default ()=> {
const options = [
'/',
'Gallery',
'Contact'
]
return(
<Router>
<div>
<NavBarNPM
pages ={options}
/>
<div>
</div>
</div>
</Router>
)
}
The basic navbar without dropdown can take the following props, only pages is required as a navbar usually requires at least one!
background = string
pages = array(required)
logo = string
logoheight = string
color = string
borderRadius = string
imgLogoAlt = string
dropdown_color = string
iconHeight = string
iconBorderRadius = string
animation = string
iconPosition = string
angle = number
the angle props has to be a number between 0 and 2 and it determines the burger menu angle when the menu is open (mobile view))
0 45deg, 1 90deg, 2 0deg
background = 'rgba(1,0,0,.9)'
pages = ['/','gallery','contact','about']
logo = 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png'
logoheight = '50px'
color = 'white'
borderRadius = '30px'
imgLogoAlt = 'github'
iconHeight = '40px'
iconBorderRadius = '10px'
animation = true
iconPosition = 'center' (center, 'flex-start', 'flex-end')
angle = 0
To use dropdowns all you have to do is to pass one or more page as an objects inside the pages array instead of a string using the following format.
{ 'THE_NAME_OF_YOUR_PAGE': { dropdown:['dropdown1', 'dropdown2']}
dropdown_color = string
dropdown_minWidth = string
shadows = bool
dropdown_marginTop = string
dropItem_margin_bottom = string
dropdown_color = 'rgba(1,0,0,.9)'
dropdown_minWidth = '200px'
shadows = false
dropdown_marginTop = '55px'
dropItem_margin_bottom = '10px'
import React from 'react'
import {
BrowserRouter as Router,
} from 'react-router-dom'
import NavBarNPM from 'reactjs-navigation'
export default ()=> {
const options = [
'/',
{
'Products':
{ dropdown:['dropdown1', 'dropdown2']}
},
{
'About us':
{dropdown:['dropdown1', 'dropdown2']}
}
]
return(
<Router>
<div>
<NavBarNPM
pages ={options}
background = 'rgba(1,0,0,.9)'
pages = {options}
logo = 'https://assets-cdn.github.com/images/modules/logos_page/GitHub-Mark.png'
logoheight = '50px'
color = 'white'
borderRadius = '30px'
imgLogoAlt = 'github logo'
dropdown_color = 'rgba(1,0,0,.9)'
/>
<div>
</div>
</div>
</Router>
)
}
import React from 'react'
import {
BrowserRouter as Router,
} from 'react-router-dom'
import NavBarNPM from 'reactjs-navigation'
export default ()=> {
const options = [
'/',
{
'Products':
{ dropdown:['page1', 'page2']}
},
{
'About us':
{dropdown:['dropdown1', 'dropdown2']}
},
{ icon:'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSqQ1YbQY6mYVrfFroJNRBYoBBbmDhmtV64WRb6EKwvG0-Dcwd7',
page:'user',
hasDropwDown:true,
dropdowns:['Register','Login']
}
]
return(
<Router>
<div>
<NavBarNPM
pages ={options}
iconPosition = 'center'
/>
<div>
</div>
</div>
</Router>
)
}