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