React-costumized-nav-bar NPM

React Costumized Navigation Bar

it's a react component for creating fully functionnal stylish menu bar

Look at the header of most of websites, don't you often see that there is a menu that contains ( profile , principal sections of the website , login ... ), dear developer now you can implement quickly this solution and you are free to style it according to your preferences 😁 Click me to see a demonstration ✋ ! Let's Begin 😎 !

Introduction

Look at this awesome menu bar done by this lib (I'm sure bleach fans will understand this names 😂 )

► Specifications :

• Easy to use 😉 • Support material design themes 📔 • Full style customization ✂️ • Place it anywhere in your code, it'll work 🎯 • All Browsers(IE, Firefox, Chrome ...) Support 🚀

► Actual & Upcoming Features :

☑️ Support both vertical and horizontal mode ☑️ Rendering Multiple Sub Items of each Bar Item ☑️ Add-on material design theme for styling ⏹️ Support Rendering Sub Items of Each Sub Items ⏹️ Add-on Styled Profile Section with support of design theme system ⏹️ Add-on Styled Notification Section with support of design theme system

Getting Started

It's simple whether you are a newbie or expert with React, just by following the instructions below you'll be able to use this library and do this cool stuff !

► Prerequisites

Since you are working with react, it's fine you'll not need to install any other dependancy, 'React >= 16.0' is the only dependancy of this helper 🤗.

► Installing

This package is available in npm repository as react-costumized-nav-bar.

npm install react-costumized-nav-bar --save

Or by Using Yarn.

yarn add react-costumized-nav-bar --save

Now wherever you want in your project, you can import it

import {Bar, BarItem, SubBarItem} from 'react-costumized-nav-bar';

► Bar Menu Properties

► BarItem & SubBarItem Properties

► Example

It's so simple, The use of each component is pretty intuitive 😉 ; For more clarification ↓↓↓ check the example below ↓↓↓

The sample code :

import {Bar, BarItem, SubBarItem} from 'react-costumized-nav-bar';

...
          <Bar>
            <BarItem title={"Hollows"}>
            </BarItem>
            <BarItem title={"Shinigamis"}></BarItem>
            <BarItem title={"Worlds"}>
              <SubBarItem title={"Soul Sociaty"} />
              <SubBarItem title={"Human World"} />
              <SubBarItem title={"Hueco Mundo"} />
            </BarItem>
            <BarItem title={"Quincies"} />
          </Bar>
...

The output result :

Styling the bar menu

It's very important to make the bar menu look awesome because it one of the things that reflects the beauty of the website ! Now , You'll see how you can use the properties to make the bar menu more stylish. The previous example will be refactored to use the properties that makes the bar menu look more stylish ↓↓↓ check the improved example below ↓↓↓

The sample code :

import {Bar, BarItem, SubBarItem} from 'react-costumized-nav-bar';

...
        <Bar
        style={{
            "height": "60px",
            "paddingTop": "50px"
        }}
        forceStyle
        itemWidth={80}
        theme={{ type: "simple-underlined-boxes" }}
        >
        <img src={BleachLogo} style={{
            "height": "100px",
            "width": "120px",
            "position": "relative",
            "bottom": "70%"
        }} />
        <BarItem title={"Hollows"}>
        </BarItem>
        <BarItem title={"Shinigamis"}></BarItem>
        <BarItem title={"Worlds"}>
            <SubBarItem title={"Soul Sociaty"} />
            <SubBarItem title={"Human World"} />
            <SubBarItem title={"Hueco Mundo"} />
        </BarItem>
        <BarItem title={"Quincies"} />
        </Bar>
...

The output result :

The Explanation :

Authors

Boumhicha El Mehdi - Initial work - Elmehdibm (Dear developers you're welcome to contribute in this work or just try this solution and leave some comments or maybe some stars to make the helper more available to everyone 🙏)