https://github.com/useallfive/react-nested-nav

React component for a nested navigation menu. Easily create an Amazon-like menu with an unlimited amount of nesting.
https://github.com/useallfive/react-nested-nav

menu menu-navigation navigation navigation-drawer nested-nav react

Last synced: about 1 year ago
JSON representation

React component for a nested navigation menu. Easily create an Amazon-like menu with an unlimited amount of nesting.

• Host: GitHub
• URL: https://github.com/useallfive/react-nested-nav
• Owner: UseAllFive
• Created: 2020-06-27T18:21:04.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2024-04-23T02:19:24.000Z (about 2 years ago)
• Last Synced: 2025-04-14T06:55:23.558Z (about 1 year ago)
• Topics: menu, menu-navigation, navigation, navigation-drawer, nested-nav, react
• Language: JavaScript
• Homepage: https://useallfive.github.io/react-nested-nav/
• Size: 1.12 MB
• Stars: 6
• Watchers: 2
• Forks: 1
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# react-nested-nav

> React nested navigation menu

[![NPM](https://img.shields.io/npm/v/react-nested-nav.svg)](https://www.npmjs.com/package/react-nested-nav) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save react-nested-nav

```

## Usage

### Format your data

[See example data here](https://github.com/UseAllFive/react-nested-nav/blob/master/example/src/data.js)

```jsx

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

}

```

```jsx

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 (

     {

        console.log(`go to: ${link}`)

      }}

    />

  )

}

export default App

```

## License

MIT © [UseAllFive](https://github.com/UseAllFive)