react-nested-nav

React nested navigation menu

Install

npm install --save react-nested-nav

Usage

Format your data

See example data here

const MenuShape = {
  title: PropTypes.string,
  id: PropTypes.string
}
const ItemsShape = {
  text: PropTypes.string.isRequired,
  link: PropTypes.string
}
ItemsShape.menu = PropTypes.shape(MenuShape)
MenuShape.items = PropTypes.arrayOf(PropTypes.shape(ItemsShape))
NestedNav.propTypes = {
  menus: PropTypes.shape(MenuShape),
  onLinkClick: PropTypes.func
}

import React from 'react'
 
import { NestedNav } from 'react-nested-nav'
import { data } from './data' // see data formatting
import 'react-nested-nav/dist/index.css' // custom css
 
const App = () => {
  return (
    <NestedNav
      menus={data}
      onLinkClick={(link) => {
        console.log(`go to: ${link}`)
      }}
    />
  )
}
 
export default App

License

MIT © UseAllFive