react-responsive-multi-level-menu's Introduction

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

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.

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.

import Menubar from "react-responsive-multi-level-menu";
import MenuItems from "../path/where/menuItems/present";
import "./styles.css"

const app = () => {
  
  const animation=['slideIn' , 'slideOut']
  <div>
    <h1>This is Animated Menu-bar</h1>
    <Menubar data={MenuItems} animation={animation} backgroundColor="#FF5733" className="menubar"/>
  </div>;
};

Guide And Documentation

For the complete documentation . Click here.

Live Preview

Demo is worth thousand words

react-responsive-multi-level-menu's People

Contributors

Stargazers

Watchers

react-responsive-multi-level-menu's Issues

Prop To Change Back Button Text

Hi, is there any way to pass a prop to change the text of the "Back" text after navigating into items?

Close Menu on selection

I'll admit this may be a silly comment - I'm fairly new to modern frontend development. I was expecting this to close when a leaf node was selected and it remains open - how can I change this behavior to close when I have selected an item?

Module error in react js

Hello, Sometimes the script throws an error.
"module "C:/Users/sawacrow/Documents/GitHub/Sawacrow-Blogger/node_modules/react-responsive-multi-level-menu/dist/index"
Could not find a declaration file for module 'react-responsive-multi-level-menu'. 'C:/Users/sawacrow/Documents/GitHub/Sawacrow-Blogger/node_modules/react-responsive-multi-level-menu/dist/index.js' implicitly has an 'any' type.
Try npm i --save-dev @types/react-responsive-multi-level-menu if it exists or add a new declaration (.d.ts) file containing declare module 'react-responsive-multi-level-menu';ts(7016) "

does anyone have an idea ?

Recommend Projects