Material-ui-responsive-menu NPM

Material-UI responsive Menu

Description

Material-UI responsive Menu is a React-Redux component that uses Material-UI to create a responsive IconMenu. It shows MenuIcons if there is enough place for theme. If the width of the container element shrinks the MenuIcons move to a IconMenu list.

You can try it out the DEMO.

Installation

This project can be istalled as npm module using following command:

npm i -S material-ui-responsive-menu

Usage

To use it just import the component and set as property a list of menu items:

import {ResponsiveMenu} from 'material-ui-responsive-menu'

const menuList=[
  {
    text: 'test1',
    icon: undefined,
    tooltip: 'test1',
    icon: <ActionHome/>,
    onTouchTap: ()=>{console.log('test1')}
  },
  {
    text: 'test2',
    icon: <ActionHome/>,
    tooltip:'test2',
    onTouchTap: ()=>{console.log('test2')}
  },
  {
    text: 'test3',
    icon: <ActionHome/>,
    tooltip:'test2',
    onTouchTap: ()=>{console.log('test2')}
  }
]

...

//then in your component
<ResponsiveMenu menuList={menuList}/>

...

Thats it :)

An complete example can be found in the App.js of the demo part of this project.