How can I set a MenuItem as active in Drawer - Material UI?

material-ui menuitem> </link
material-ui disable menu item
material-ui submenu
menuitem onclick material-ui
material-ui dropdown menu example
material-ui iconmenu
material-ui menu icon
menu list material-ui

I have this code:

            <Drawer 
                docked = {false}
                width = {330}
                open = {this.state.drawerOpen}
                onRequestChange = {(drawerOpen) => this.setState({drawerOpen})}
            >

                    <MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/inicio"/>}/>
                    <MenuItem primaryText="Nueva Incidencia" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/nueva_incidencia"/>}/>
                    <MenuItem primaryText="Incidencias Recibidas" onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/incidencias_recibidas"/>}/>
                    <MenuItem primaryText="Informes" /*onTouchTap = {() => this.currentPages('Informes')}*/onTouchTap = {this.drawerOpened} containerElement = {<Link to="/administrador/informes"/>}/>
            </Drawer>

I want that when I click on one MenuItem, it set up as 'active' (as in Bootstrap), with a background lighgrey and similar styles. How could I do this?. The problem is due to React-Router too, which unmount the component Menu and Re-Render it again, so states are not available.

Thank you.

Here is my workaround:

define function:

isActive = (value) => (location.pathname === value ? 'active' : '')

<MenuItem primaryText="Inicio" onTouchTap = {this.drawerOpened} 
className={this.isActive('/administrador/inicio')}
containerElement = {<Link to="/administrador/inicio"/>}/>

now you are just missing de css styles for 'active'.

Active menu item · Issue #4953 · mui-org/material-ui · GitHub, Description I am using MenuItem within a Drawer and would like to have the option to define Wondering how they do this on the material-ui demo page? or no need to array.prototype.map if your menu items don't change. You can override the style of the component thanks to one of these customization points: With a rule name of the classes object prop. With a global class name. With a theme and an overrides property. If that's not sufficient, you can check the implementation of the component for more detail. Inheritance. The props of the ListItem component are also available

How about creating a wrapper component around MenuItem and accepting style property and then applying it to MenuItem?

This may help further: Toggle background color of list on click react.js

MenuItem API, The API documentation of the MenuItem React component. The MuiMenuItem name can be used for providing default props or style overrides at the theme level. Mui-selected, Styles applied to the root element if selected={true} . Dialog Title · Divider · Drawer · Expansion Panel · Expansion Panel Actions · Expansion  Temporary drawer. Temporary navigation drawers can toggle open or closed. Closed by default, the drawer opens temporarily above all other content until a section is selected. The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the open prop.

@jpnazar answer is almost correct. However, the containerElement properties is no longer working. you can now use the code above to specify the link.

import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';

...

<MenuItem component={Link} to="/your-path">...</MenuItem>

check out the issue on. https://github.com/mui-org/material-ui/issues/204

Active link on sidebar with React-Router + Material-UI drawer , Setup and Problem I have a Material-UI <Drawer> as my sidebar. Each <Link> has a Material-UI <MenuItem> nested inside of it. import  Description I am using MenuItem within a Drawer and would like to have the option to define an active item (e.g. if the user is at /home then the Home MenuItem should be highlighted. Skip to content mui-org / material-ui

Material-UI + React Router - #7 Navigation Menu, Now that we got a drawer going, it's time to implement a side menu with links. When the link Duration: 12:31 Posted: Jun 14, 2018 The API documentation of the Drawer React component. Learn more about the props and the CSS customization points.

Create a Dynamic Sidebar Menu in React (with Multi-level Nesting), Material-UI is a UI framework for React that provides various falls below with the children, like Drawer, App Bar etc. but when one of them is selected, the this method sets the current state of a menu item i.e whether it is in  The API documentation of the Menu React component. Learn more about the props and the CSS customization points. You can learn more about the difference by reading this guide. If true (Default) will focus the [role="menu"] if no focusable child is found. Disabled children are not focusable. If you set this prop to false focus will be placed on

How To Use Material UI Menus In ReactJS Applications, Now Install Material-UI by using the following command. import Menu from '@​material-ui/core/Menu';; import MenuItem from {options.map(option => (; <​MenuItem key={option} selected={option === 'Pyxis'} a new component named 'DrawerDemo.js' and add the following code into this component,. The MenuItem is a wrapper around ListItem with some additional styles. You can use the same list composition features with the MenuItem component: Max height menus. If the height of a menu prevents all menu items from being displayed, the menu can scroll internally.

Comments
  • thank you a lot. I have already seen this. But my problem is too due to I am using Routes Link from React Router, and the component re-render losing his states.
  • ohh, didn't know that as was not mention. I suggest if you can post a separate question to handle state using React Router re-rendering.
  • States are not available due to the unmount and re-rendering component, they are setted up as default. However, I only have a state: opened: true/false, no more. Thank you.