This package has been deprecated

Author message:

This package was never intended to be for public use so is now deprecated

react-flexbox-navbar

0.1.3 • Public • Published

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!

Readme

Keywords

none

Package Sidebar

Install

npm i react-flexbox-navbar

Weekly Downloads

0

Version

0.1.3

License

MIT

Unpacked Size

1.09 MB

Total Files

13

Last publish

Collaborators

  • charliearlie