react-nested-menu
v1.0.9
Published
React JS component for rendering nested navigation menus
Downloads
290
Readme
React Nested Menu
React JS component for rendering nested navigation menus
Example
Installation
npm install react-nested-menu --save
Usage
React Nested Menu renders HTML of a multi-level navigation menu. The structure of the menu is generated from an array of objects
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import ReactDOM from 'react-dom';
import { ReactNestedMenu } from 'react-nested-menu';
class App extends Component {
linkTransformer = (menuItem) => {
return (
<Link to={menuItem.url}>{ menuItem.title }</Link>
)
}
render() {
const menu = [
{
id: 1,
title: "Home",
url: "/"
},
{
id: 2,
title: "About Us",
url: "/about-us"
},
{
title: "Team",
url: "/team",
children: [
{
id: 8,
title: "Tim Drake",
url: "/tim-drake"
},
{
id: 9,
title: "Jason Todd",
url: "/jason-todd"
},
{
id: 10,
title: "Richard Grayson",
url: "/richard-grayson"
}
]
},
{
title: "Services",
url: "/services",
children: [
{
id: 5,
title: "Web Development",
url: "/web-development"
},
{
id: 6,
title: "UI Design",
url: "/ui-design"
},
{
id: 7,
title: "Copywriting",
url: "/copywriting"
}
]
},
{
id: 4,
title: "Contact",
url: "/contact"
},
{
title: "Social",
url: "/social",
children: [
{
id: 11,
title: "Twitter",
url: "/twitter"
},
{
id: 12,
title: "Facebook",
url: "/facebook"
}
]
},
];
return (
<div className="App">
<ReactNestedMenu
navParentClassname="vertical menu nested"
navTopLevelParentClassname="vertical menu"
navChildClassname="child"
linkTransformer={this.linkTransformer}
menuData={menu}/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
Props
- navParentElement: HTML tag name of elements that wrap nav menu elements
- type:
string
- default:
ul
- type:
- navChildElement: HTML tag name of elements wrapped by parent elements
- type:
string
- default:
li
- type:
- navParentClassname: class of nav parent elements
- type:
string
- type:
- navTopLevelParentClassname: class of top level nav parent elements
- type:
string
- type:
- navChildClassname: class of nav child elements
- type:
string
- type:
- navUrlProperty: the key name to use as the href attribute of the anchor tags
- type:
string
- default:
url
- type:
- navTitleProperty: the key name to use as the title wrapped by the anchor tags
- type:
string
- default:
title
- type:
- childMenuProperty: the key name of the array of child nav items
- type:
string
- default:
children
- type:
- arrayKey: the key to use as the key attribute in React array elements
- type:
string
- default:
id
- type:
- linkTransformer: function that accepts an object in the
menuData
array and returns a React element; this can be used to render something besides an anchor tag such as a React RouterLink
element- type:
function
- type:
- menuData: an array of objects
- type:
array
- type: