https://github.com/codebrahma/react-responsive-multi-level-menu
React component for a space-saving drop-down menu with subtle effects
https://github.com/codebrahma/react-responsive-multi-level-menu
menubar npm-package react react-menubar
Last synced: 7 months ago
JSON representation
React component for a space-saving drop-down menu with subtle effects
- Host: GitHub
- URL: https://github.com/codebrahma/react-responsive-multi-level-menu
- Owner: Codebrahma
- Created: 2019-12-26T07:12:57.000Z (about 6 years ago)
- Default Branch: newMaster
- Last Pushed: 2023-03-03T10:05:00.000Z (almost 3 years ago)
- Last Synced: 2024-12-04T04:02:41.249Z (about 1 year ago)
- Topics: menubar, npm-package, react, react-menubar
- Language: JavaScript
- Homepage: https://react-responsive-multi-level-menu-demo.netlify.com/
- Size: 4.29 MB
- Stars: 6
- Watchers: 3
- Forks: 6
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-responsive-multi-level-menu
A react library which provides flexible and cool animated menubar with an easy to use API and a bunch of awesome features . Give it a try and you will love it for sure.
## Install
```bash
npm install --save react-responsive-multi-level-menu
```
## Usage
### 1.Define the data
* Define the data(menu items) as per the given format , which you want to render in the Menubar.
```js
const menuItems = [
{ value: "Fashion",
items: [
{ value: "Men",
items: [{ value: "Shirts" }]
}
]
},
{ value: "Electronics"},
{ value: "Furnitures"},
{ value: "Jewelery&watches", items: [] }
];
export default MenuItems;
```
### 2. Use the Menubar component anywhere in your code
Use the Menubar component anywhere and pass the props.
```js
import Menubar from "react-responsive-multi-level-menu";
import MenuItems from "../path/where/menuItems/present";
import "./styles.css"
const app = () => {
const animation=['slideIn' , 'slideOut']
This is Animated Menu-bar
;
};
```
## Guide And Documentation
For the complete documentation . Click here.
## Live Preview