react-easy-navbar

A simple library allowing to create customizable, beautiful and responsive navbars.

Still in development

Installation

Run the following command: npm install react-easy-navbar

Usage

Imports

import {
  Navbar, NavlinkDropdown,
  NavlinkDropdownElement,Navlink, NavlinksList, Logo
} from 'react-easy-navbar'

Components

Navbar

Mother component for initializing the Navbar

props:

textColor	hex, rgb(a)
backgroundColor	hex only

NavlinksList

Component that wrap the Navlinks

Navlink

For a simple Navigation button. Should be inside <NavlinksList>

props :

text	Text placeholder for the button

NavlinkDropdown

Component for a dropdown menu. Should be inside <NavlinksList>

props :

text	Text placeholder for the button

NavlinkDropdownElement

Dropdown element, should be inside <NavlinkDropdown>

Logo

For text logo. Will be at right if placed before NavlinksList and vice-versa.

props :

text	Text placeholder for the button
color	CSS color (text color)
fontSize	CSS font-size
fontWeight	CSS font-weight

Example

        <Navbar
          backgroundColor="#3949ab"
          textColor="white"
        >
          <NavlinksList>
            <Navlink text="Sign-up" />
            <Navlink text="Sign-in" />
            <Navlink text="F.A.Q" />
            <NavlinkDropdown text="Dropdown">
              <NavlinkDropdownElement text="Dropdown 1" textColor="black"/>
              <NavlinkDropdownElement text="Dropdown 2" textColor="black"/>
            </NavlinkDropdown>
          </NavlinksList>
          <Logo text="React-easy-nav"/>
        </Navbar>