## 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
| 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';
...
...
```
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';
...
...
```
The output result :
The Explanation :
## Authors
-------
* **Boumhicha El Mehdi** - *Initial work* - [Elmehdibm](https://github.com/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](.\LICENSE.md) file for details
---
_Source: https://npm.io/package/react-costumized-nav-bar · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._