Material-ui: Active menu item

[davidtzoor]

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.

[nicolaiskogheim]

These two issues will be easier to discuss if you split them up.

[Findiglay]

Wondering how they do this on the material-ui demo page?

[cezarneaga]

I would love it if they would publish an uncompiled demo of the material-ui website too.
The submenus, the active features are not part of the docs

[goums]

You can see the doc source here :
https://github.com/callemall/material-ui/blob/master/docs/src/app/components/AppNavDrawer.js

There are actually not using MenuItem but ListItem instead, and leveraging the makeSelectable function of this module to create a SelectableList.

Not very straightfroward.. would be very nice if menu item make "selectable" component more accesible.

[alamgirqazi]

Here's what I did

` 
//inside render

     if(Store.app == true) // Mobx Store. you can use component state as well
{
var backgroundhover = {
  backgroundColor: '#E8E8E8',
}}
else if ((Store.app == false)) {
 var backgroundhover = {
  backgroundColor: '#FFFFFF',
} }
          // Inside Return
 <MenuItem style={backgroundhover} onClick={this.showApp} primaryText="App" > </MenuItem>
`

[Findiglay]

I render the menu items like this, using react-router v3:

this.props.childRoutes.map(route => (
   <MenuItem
     key={route.path}
     style={
       this.props.router.isActive(route.path) ? {
         ...styles.item,
         ...styles.active,
       } : styles.item
     }
     onTouchTap={e => this.handleNavigate(e, route.path)}
   >
      { route.title }
  </MenuItem>
));

Use shouldComponentUpdate to improve performance or no need to array.prototype.map if your menu items don't change.

[oliviertassinari]

You can use the selected property on the v1-beta branch.

[lunchboxer]

Could someone add this to the docs. I can't find anything about makeSelectable or selected

[oliviertassinari]

@lunchboxer You can find it here: https://material-ui-next.com/api/menu-item/#menuitem