simple-react-accordion-menu

A simple dynamically created accordion menu in react

Install

npm i simple-react-accordion-menu

Usage

import React, { Component } from 'react'

import { AccordionMenu } from 'simple-react-accordion-menu'

import 'simple-react-accordion-menu/dist/index.css'

class Example extends Component {
  render() {
    return (
      <AccordionMenu
        width='350px'
        subUlClassName='sub-ul'
        menuItems={MENUITEMS}
      />
    )
  }
}

/*
 ** Menu items should be an array of object
 ** Each object must have label and href field.
 ** Object can also have subMenuItems field which can also contain array of object
 ** Each object inside subMenuItems item can also have label,href and more subMenuItems array
 */

const MENUITEMS = [
  {
    label: 'Home',
    href: '#'
  },
  {
    label: 'Shop',
    href: '#',
    subMenuItems: [
      {
        label: 'Mobile',
        href: '#',
        subMenuItems: [
          {
            label: 'SmartPhone',
            href: '#',
            subMenuItems: [
              { label: 'Apple', href: '#' },
              {
                label: 'Samsung',
                href: '/brand/samsung',
                subMenuItems: [
                  { label: 'Galaxy Series', href: '#' },
                  { label: 'Note Series', href: '#' }
                ]
              }
            ]
          },
          {
            label: 'Bar Phone',
            href: '#'
          }
        ]
      },
      { label: 'Laptop', href: '#' }
    ]
  }
]

Available props

Name	Type	Description
width	String	Width of menu container
subUlClassName	String	Class names of children Ul
menuItems	Array	Menu items in array

Notice

This plugin is still on development. Create a new issue if you face any problem.

License

MIT © iamanam