https://github.com/bigyusuf/menu-lib
reusable awesome navbar menu
https://github.com/bigyusuf/menu-lib
circleci circleci-orbs coverage-report coveralls jest react react-hooks reactjs unit-testing
Last synced: 7 months ago
JSON representation
reusable awesome navbar menu
- Host: GitHub
- URL: https://github.com/bigyusuf/menu-lib
- Owner: BigYusuf
- License: mit
- Created: 2022-06-24T08:50:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2022-07-08T19:55:10.000Z (about 3 years ago)
- Last Synced: 2025-03-20T07:38:34.432Z (7 months ago)
- Topics: circleci, circleci-orbs, coverage-report, coveralls, jest, react, react-hooks, reactjs, unit-testing
- Language: JavaScript
- Homepage:
- Size: 1.01 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-navbar-menu
---
Powered by BigYusufff. Check some of my awesome projects out https://yusuflateef.vercel.app/
[![NPM version][npm-image]][npm-url] [](https://github.com/BigYusuf/menu-lib) [![build status][github-actions-image]][github-actions-url] [![Coverage Status][coveralls-image]][coveralls-url] [![npm download][download-image]][download-url] [![bundle size][bundlephobia-image]][bundlephobia-url]
[npm-image]: http://img.shields.io/npm/v/react-navbar-menu.svg?style=flat-square
[npm-url]: http://npmjs.org/package/react-navbar-menu
[github-actions-image]: https://github.com/BigYusuf/menu-lib/workflows/CI/badge.svg
[github-actions-url]: https://github.com/BigYusuf/menu-lib/actions
[circleci-image]: https://img.shields.io/circleci/BigYusuf/menu-lib/master?style=flat-square
[coveralls-image]: https://coveralls.io/repos/github/BigYusuf/menu-lib/badge.svg?branch=master
[coveralls-url]: (https://coveralls.io/github/BigYusuf/menu-lib?branch=master)
[download-image]: https://img.shields.io/npm/dm/react-navbar-menu.svg?style=flat-square
[download-url]: https://npmjs.org/package/react-navbar-menu
[bundlephobia-url]: https://bundlephobia.com/result?p=react-navbar-menu
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/react-navbar-menu
## Install
[](https://npmjs.org/package/react-navbar-menu)
## Usage
### With linear-gradient
```js
import React from 'react'
import { Navbar } from 'react-navbar-menu'
const Header = () => {
return (
)
}
export default Header
```
### Without linear-gradient (with ActiveColor)
```js
import React from 'react'
import { Navbar } from 'react-navbar-menu'
const Header = () => {
return (
)
}
export default Header
```
## Compatibility
| [
](http://godban.github.io/browsers-support-badges/)
IE / Edge | [
](http://godban.github.io/browsers-support-badges/)
Firefox | [
](http://godban.github.io/browsers-support-badges/)
Chrome | [
](http://godban.github.io/browsers-support-badges/)
Safari | [
](http://godban.github.io/browsers-support-badges/)
Electron |
| --- | --- | --- | --- | --- |
| IE11, Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
### General Props
name
type
default
description
Position
String
"Top"
Specify the position of the component. "Top" or "top" or "Bottom"
Center
Boolean
false
Choose to center the compenent true or false
borderRadius
Number
64
{Optional} Specify the border-radius
Width
Number
{Optional} Specify the width of component
backgroundColor
String
""
Specify the background color for the menu/ navbar menu e.g. "blue","#a595e9"
### Menu Items Props
name
type
default
description
MenuNumber
Number
The MenuNumber denotes 'how many menu-items you want. Although Maximum is 5 and minimum is 1'
Font
Number
{optional}Specify the font-size. As the icons increase and decrease, Height will adjust automatically but Width will need to be adjusted maually
IconColor
String
""
Specify the color for the menu items/ navbar menu items e.g. "blue","#a595e9"
activeColor
String
""
Specify the background color for the active menu items/ navbar menu items e.g. "blue","#a595e9"
activeIconColor
String
""
Specify the color for the menu item/ navbar menu item e.g. "blue","#a595e9"
degree
String
""
{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "to left", "to right", "to bottom left" etc.
gradcolor1
String
""
{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "blue" etc.
gradcolor2
String
""
{Optional} This is part of linear-gradient(degree, gradcolor1,gradcolor2), this will inturn overwrite activeColor and become the active background color. Specify the direction of background color for the active menu item/ navbar menu items e.g. "green" etc.
icon1, icon2... icon5
String
""
Specify the name of the icon for each specific icon number(icon1, icon2) for the menu item/ navbar menu items. e.g. "bx bx-home", "fa fa-house" etc.
url1, url2... url5
String
""
Specify the name of the url for each specific url number(url1, url2) for the menu item/ navbar menu items. e.g. "/", "#contact" etc.
## Installation
```npm
npm install react-navbar-menu
```
## Live Examples
https://ri4w0d.csb.app/
## More Info
https://yusuflateefblog.vercel.app/post/react-navbar-menu
## Code Installation
```npm
npm install
```
## License
react-navbar-menu is released under the MIT license.