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

Specifications

Actual & Upcoming Features

BarItem & SubBarItem Properties

Example

➡️ Styling the bar menu

Material Design Theme

Inline Css Styles

➡️ Authors

➡️ Licence

Introduction

A small Text

► 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

Property	Type	Default	Description
itemWidth	number	auto	Number of pixels of the length of the width of the Item in the bar menu. Per default it will take the automatic size of the block of the item.
itemsPosition	vertical \| horizontal	horizontal	Specifies the mode of display of the bar and its items.
width	number	100% or auto	Number of pixels of the length of the width of all the menu bar. Per default it will take 100% of the size if the bar is on horizontal mode or auto on vertical mode.
height	number	100% or auto	Number of pixels of the length of the height of all the menu bar. Per default it will take 100% of the size if the bar is on vertical mode or auto on horizontal mode.
type	simple \| simple-underlined \| simple-underlined-boxes	simple	It's a way to make the menu bar more stylish and support multiple designs by simply adding keywords (simple , underlined, boxes ..). You're welcome to suggest any design mode to work on it 🤩 ✌️ !
style	object	{}	The inline-style to combine css styles to the bar
forceStyle	true \| false	false	It's linked to the style property, some css properties added in style may have some conflicts, If the forceStyle is set to true, all the css in style overrides the existed css in the bar.

► BarItem & SubBarItem Properties

Property	Type	Default	Description
title	string	Empty Title	The text displayed in the block Item on the bar
style	object	{}	The inline-style to combine css styles to the bar

► 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 * 🙏)

License

This project is licensed under the MIT License - see the LICENSE.md file for details

elmehdibm/react-costumized-nav-bar-demo