A simple dynamically created accordion menu in react
npm i simple-react-accordion-menuimport 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
< 6086 /a>| Name | Type | Description |
|---|---|---|
| width | String | Width of menu container |
| subUlClassName | String | Class names of children Ul |
| menuItems | Array | Menu items in array |
This plugin is still on development. Create a new issue if you face any problem.
MIT © iamanam