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 😎 !
Look at this awesome menu bar done by this lib (I'm sure bleach fans will understand this names 😂 )
• 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 🚀
☑️ 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
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 !
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 🤗.
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';
| 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. |
| 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 |
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 :
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 :
- 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 * 🙏)
This project is licensed under the MIT License - see the LICENSE.md file for details