react.js component for metismenu
Install with npm:
$ npm install @metismenu/reactInstall with yarn:
$ yarn add @metismenu/reactAdd project file to metismenu
import MetisMenu from '@metismenu/react';
// import MetisMenu css
import 'metismenujs/dist/metismenujs.css';- Create SideBar component
// pages/SideBar.jsx
import React from 'react'
import { Link, NavLink } from 'react-router-dom'
import MetisMenu from '@metismenu/react';
import 'metismenujs/dist/metismenujs.css';
const SidebarNav = () => {
return (
<React.Fragment>
<MetisMenu>
<li><NavLink to="/" exact>Home</NavLink></li>
<li>
<Link to="#" className="has-arrow">Other Pages</Link>
<ul>
<li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
</ul>
</li>
<li>
<Link to="#" className="has-arrow">External Pages</Link>
<ul>
<li><a href="https://github.com/onokumus/metismenujs" target="_blank" rel="noopener noreferrer">metismenujs</a></li>
<li><a href="https://github.com/onokumus/metismenu" target="_blank" rel="noopener noreferrer">metismenu jquery</a></li>
</ul>
</li>
</MetisMenu>
</React.Fragment>
)
}
export default SidebarNav- Call Component to App
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import SidebarNav from './pages/SidebarNav';
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';
import './App.css';
function App() {
return (
<BrowserRouter>
<div className="app">
<aside className="sidebar">
<SidebarNav />
</aside>
<div className="content">
<Route component={Home} path="/" exact />
<Route component={About} path="/about" />
<Route component={Contact} path="/contact" />
</div>
</div>
</BrowserRouter>
);
}
export default App;Type: Boolean
Default: true
For auto collapse support.
<MetisMenu toggle={false}>
...
</MetisMenu>Type: html tag
Default: a
<MetisMenu triggerElement="h2">
...
</MetisMenu>Type: html tag
Default: li
<MetisMenu parentTrigger="div">
...
</MetisMenu>Type: html tag
Default: ul
<MetisMenu subMenu="div">
...
</MetisMenu>https://github.com/onokumus/metismenu-react-example
https://onokumus.com/metismenu-react-example/
- metismenu: A jQuery menu plugin | homepage
- metismenujs: MetisMenu with Vanilla-JS | homepage
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Osman Nuri Okumus
Copyright © 2020, Osman Nuri Okumus. Released under the MIT License.