React Flexbox Navbar

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.

Get it in to your project

npm install react-flexbox-navbar --save

Example

<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>

API

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

NavSection

NavItem

Navbar.Search (May become NavSection.Search)

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.

Coming 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!