Have ideas to improve npm?Join in the discussion! »

    @metismenu/react
    TypeScript icon, indicating that this package has built-in type declarations

    0.0.2 • Public • Published

    @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

    1. 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
    1. 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

    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.

    Install

    npm i @metismenu/react

    DownloadsWeekly Downloads

    102

    Version

    0.0.2

    License

    MIT

    Unpacked Size

    8.57 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar