react-flexbox-navbar v0.1.3
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 --saveExample
<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!