React JS – Simply Menu Metismenu

React-MetisMenu is a React-based component library for building responsive, customizable, and accessible menus for web applications. It is built on top of the popular CSS framework, Bootstrap, and includes a set of pre-designed menu templates, icons, and animations.

With React-MetisMenu, you can create a wide range of menu types, including sidebar menus, dropdown menus, nested menus, and more. The library provides a simple API for defining your menus, and supports a variety of customization options, such as customizing the menu’s color scheme, font sizes, and animations.

React-MetisMenu also includes accessibility features, such as keyboard navigation and support for screen readers, ensuring that your menus are accessible to all users.

Here’s an example of how you can use React-MetisMenu to create a simple sidebar menu:

import React, { Component } from 'react';
import { MetisMenu } from 'react-metismenu';
import 'react-metismenu/dist/react-metismenu-standart.css';

class Sidebar extends Component {
  render() {
    const menu = [
      {
        icon: 'fa fa-home',
        label: 'Home',
        to: '/'
      },
      {
        icon: 'fa fa-users',
        label: 'Users',
        to: '/users',
        content: [
          {
            icon: 'fa fa-user',
            label: 'All Users',
            to: '/users/all'
          },
          {
            icon: 'fa fa-user-plus',
            label: 'Add User',
            to: '/users/add'
          }
        ]
      },
      {
        icon: 'fa fa-cog',
        label: 'Settings',
        to: '/settings'
      }
    ];

    return (
      <MetisMenu content={menu} activeLinkFromLocation className="sidebar-menu" />
    );
  }
}

export default Sidebar;

In this example, the Sidebar component uses React-MetisMenu to create a simple sidebar menu. The menu is defined as an array of objects, with each object representing a menu item. Each menu item can include an icon, a label, a link, and optionally, a submenu.

The MetisMenu component is used to render the menu, with the content prop set to the menu array. The activeLinkFromLocation prop is set to true, which enables automatic highlighting of the active menu item based on the current URL location. Finally, the className prop is set to ‘sidebar-menu’, which allows for further customization using CSS.

React-MetisMenu provides a simple and flexible solution for creating responsive, accessible, and customizable menus in React applications.