Material-ui: how to add menu items to AppBar left default menu

[jma7889]

How to add menu items to the default left menu icon? I use the code below to add it, it seems over lay with the default 'menu' icon. I can tell because the menu icon becomes black instead of white by default.

  `<AppBar
    title="Foo"        
    iconElementLeft = {
      <IconMenu iconButtonElement={
        <IconButton iconClassName="material-icons" > menu </IconButton>
      }>
      <MenuItem primaryText="Refresh" />
      <MenuItem primaryText="Help" />
      <MenuItem primaryText="Sign out" />
    </IconMenu>
    }
  />`

I just want to add menu items to the left 'menu' icon menu, as if in the example
<AppBar title="Title" />
but in the example, they didn't add any menu items to the only left side menu icon button.

Also, does it work with react-router? Below code is NOT valid. How do I add link to the menu item, have to use event?

`<AppBar
    title="Foo"        
    iconElementLeft = {
      <IconMenu iconButtonElement={
        <IconButton iconClassName="material-icons" > menu </IconButton>
      } openDirection="bottom-right">

      <Link to="/bar"><MenuItem primaryText="Bar" /></Link>


    </IconMenu>
    }
  />`

How do I distinguish which item is clicked? value id and primaryText all cannot be gotten from the event.

`handleMenuClick: function(event) {
console.log(event.target);

},`
...

`<AppBar
    title="Well Factory Sim"        
    iconElementLeft = {
      <IconMenu iconButtonElement={
        <IconButton iconClassName="material-icons" > menu </IconButton>
      } openDirection="bottom-right"
      onItemTouchTap={this.handleMenuClick}>

      <MenuItem primaryText="a" value="a" id="a" />       
      <MenuItem primaryText="b" value="b" id="b" />       

    </IconMenu>
    }
  />`

[treeder]

This is how I did it:

<AppBar
          title="Test"
          onLeftIconButtonTouchTap={this.handleToggle}
        />
        <LeftNav
            open={this.state.menuOpen}
            onRequestChange={open => this.setState({menuOpen: open})}
            docked={false}>

          <MenuItem onTouchTap={this.closeLeftNav} value={'/'} primaryText="Home"/>
     </LeftNav>

[oliviertassinari]

@treeder Thanks for your anwser.
@jma7889 That doesn't looks like an issue with material-ui, please use stackoverflow for questions. Unless you think we can improve the documentation, I will close the issue.

[Sigfried]

I think the documentation can certainly be improved here. In the Simple Example (http://www.material-ui.com/#/components/app-bar) it says "By default, the left icon is a navigation-menu," but it's not at all obvious how to use it as an actual navigation-menu -- or even what a navigation-menu is, other than an icon.

[nejohnston]

@oliviertassinari Would it be possible to address @Sigfried 's comment? I believe he makes a valid point. Furthermore, would be nice to see your team work through problems such as this!! Cheers!

[oliviertassinari]

@nejohnston Please check out the v1-beta version.

[Sigfried]

Thanks. Is there any guidance available on upgrading to v1-beta? Or any off-the-cuff opinions about how much one's application is likely to break in attempting to upgrade? There's probably a better place to ask or find the answer but I didn't see it with a cursory search.

[oliviertassinari]

Is there any guidance available on upgrading to v1-beta?

@Sigfried The best we have is #7195.

Or any off-the-cuff opinions about how much one's application is likely to break in attempting to upgrade?

It's a complete rewrite.

[Sigfried]

Excellent. So I won't be tempted to just jump in with my fingers crossed ;)

[ejoo]

One of the worst libraries I've worked with. If I had to do that much by myself then why I'm choosing a library?

[oliviertassinari]

@ejoo Yes, why?

[leMaik]

@ejoo Do you expect the library's maintainers to upgrade your code? :sweat_smile:

[alonextou]

@leMaik I think he means why use the app bar if it's more work?

It's great for just having a title on the left and icon on the right... but if you want anything custom like a menu, and of course most people would, you end up fighting the app-bar more than it helps.