A simple navbar you can import in to your project without having to import a large library like React Bootstrap or any other alternative. The navbar is fully responsive and provides a toggle menu when at a lower screen width. This menu will be optional in my next update. Just pass the Navbar a few simple props and you'll be up and running.

This is my first time having a go at building a standalone React component, so bear with me as I devote more time to making it more customisable and polished. I'm currently using it in another one of my projects in my repo so I thought it would be best to extract it and let it live on it's own.

npm install react-flexbox-navbar --save

<Navbar
    title="react-navbar" 
    color="#19647E"
    fixedTop
>
    <Navbar.NavSection>
        <Navbar.NavItem link="www.google.co.uk">
            Hello
        </Navbar.NavItem>
    </Navbar.NavSection>
    <Navbar.NavSection isRight>
        <Navbar.NavItem>
            I'm on the right
        </Navbar.NavItem>
        <Navbar.NavItem>
            Me too
        </Navbar.NavItem>
    </Navbar.NavSection>
</Navbar>

Prop	Description	Type	Default
title	The title you want displayed at on the left of the navbar	string	""
color	The colour you wish to apply to the navbar - in the next update, the text will automatically be an invert of this colour	string (Hex value)	#2C363F
fixedTop	Whether you want the navbar to be fixed to the top of the page	boolean	false

Prop	Description	Type	Options	Default/Required
onSearchSubmit	The call back function for your search query	function		required
placeholder	Placeholder text to appear in the search input	string		Search...
width	Width of the search input	string		300px
iconPosition	Position of the icon in the search input	string	right left none	left

This is currently under development so these will have API details very soon.

• Search component
• Automatic font colouring
• Optional toggle menu
• Layout customisations
• Dropdown component
• Sidebar
• Custom height and more.

This is a work in progress and is not ready to use in your app.

I'd be happy with any contributions, so feel free to make a pull request!