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