npm.io
1.0.3 • Published 5 years ago

navigationbar-circle

Licence
Version
1.0.3
Deps
2
Size
562 kB
Vulns
0
Weekly
0
Stars
1

navigationbar-circle

demo: https://navigationbar-circle.herokuapp.com/

Getting Started

Prerequisites

Add the class container-circle-navbar to your root element in index.html

 <div id="root" class="container-circle-navbar"></div>
Installing
npm i navigationbar-circle --save
How to use
import Nav from 'navigationbar-circle';

class App extends React.Component {
	 render () {
		 return (
             <Nav 
             navItems={
                [
                    <div onClick={() => alert('Home')}><i className="fas fa-home"></i> Home</div>,
                    <div onClick={() => alert('About')}><i className="fas fa-user-alt"></i> About</div>,
                    <div onClick={() => alert('Contact')}><i className="fas fa-envelope"></i> Contact</div>
                ]
            }
             />
             { ... your app }
          }
          />
		 )
	 }
}
Props
prop type default value
circleBackgroundColor string transparent
navItems array []
openIcon Element
closeIcon Element

Navbar events

Event default value
onClose () => {}
onOpen () => {}

Author

  • Harish S Khot

Keywords