react-simple-navbar v1.0.5

Documentation 🔖

Introduction 🔡

React-simple-navbar is a ready-made responsive and customizable navbar that beginners and experts can use in their react projects.

Install the package 📦

npm install react-simple-navbar

Import the package from the node module folder 📂

node_modules > react-simple-navbar > src > lib > components > styles > index.css 👇🏽

import '../node_modules/react-simple-navbar/src/lib/components/styles/index.css'
function App() {
  return (
    <div className="App">

    </div>
  );
}

export default App;

The Tags

Nav tag

Logo tag

Input tag

Label Tag

Cite tag

Ul tag

Li tag

import '../node_modules/react-simple-navbar/src/lib/components/styles/index.css'
function App() {
  return (
    <div className="App">
       <nav>
        <logo>logo</logo>
        <input type="checkbox" id="menu-btn" />
        <label for="menu-btn">
          <cite></cite>
        </label>
        <ul>
          <li>Home</li>
          <li>About</li>
          <li>School</li>
          <li>Contact</li>
        </ul>
      </nav>
    </div>
  );
}

export default App;

With the code above and you're good to go. 👆

Result

Desktop default View 👇🏽

Mobile default View 👇🏽

How to edit background color and color(font color)

To edit the background color and color add the code below 👇🏽 into the nav tag.

<nav style={{backgroundColor:"brown", color:"green"}}></nav>

You should get something like this 👇🏽

For Logo 🔷

To use logo, add an image or text in between the logo tag.

<logo><img src='./images/logo.png'/></logo>

You can reduce or increase the width and height of the logo 👇🏽

<logo style={{width:"50px", height:"50px"}}><img src='./images/logo.png'/></logo>

The Label Tag 🏷️

The Label tag is body for the harmburger icon(the collapse button). You can edit the background color of the icon. 👇🏽

<label style{{backgroundColor:"White"}}></label>

The Cite Tag

This is the harmburger icon itself don't temper with it.

The Li Tag 📒

This is the tag for the text link(Home, About, School etc). You can edit it by adding the follow code below in the Li tag. 👇🏽

Miscellaneous 📝

You can also edit to your choice of color, size, width, etc by using the style code inside the respective tag.

About 👥

This project is developed by me, Sam Abdul And my friend Tega. You can give us credit by follow us on Twitter @SamAbdul_ and @Teggyg_. If you have any question you can message us on Twitter. Thank you🇳🇬.