0.0.3 • Published 1 year ago
@metismenu/react v0.0.3
@metismenu/react
react.js component for metismenu
Getting started
Install
Install with npm:
$ npm install @metismenu/react
Install with yarn:
$ yarn add @metismenu/react
Add project file to metismenu
import MetisMenu from '@metismenu/react';
// import MetisMenu css
import 'metismenujs/dist/metismenujs.css';
Usage
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;
Properties
toggle
Type: Boolean
Default: true
For auto collapse support.
<MetisMenu toggle={false}>
...
</MetisMenu>
triggerElement
Type: html tag
Default: a
<MetisMenu triggerElement="h2">
...
</MetisMenu>
parentTrigger
Type: html tag
Default: li
<MetisMenu parentTrigger="div">
...
</MetisMenu>
subMenu
Type: html tag
Default: ul
<MetisMenu subMenu="div">
...
</MetisMenu>
Example Repo
https://github.com/onokumus/metismenu-react-example
Demo
https://onokumus.com/metismenu-react-example/
About
Related projects
- metismenu: A jQuery menu plugin | homepage
- metismenujs: MetisMenu with Vanilla-JS | homepage
Contributing
Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Author
Osman Nuri Okumus
License
Copyright © 2020, Osman Nuri Okumus. Released under the MIT License.