Material UI Menu using routes

another long overdue update:

containerElement prop is not supported anymore, use component prop instead.

Check out the document here.

2016 December Edit: the linkButton prop is deprecated, you will get a warning:

Warning: Unknown props `linkButton` on <a> tag.

So simply remove the prop:

<MenuItem  containerElement={<Link to="/profile" />}  primaryText="Profile"  leftIcon={    <FontIcon className="material-icons">people</FontIcon>  }/>

Here's an Example Repo, and the Live Demo Here.

Original answer:

Just wanted to point out that if you're using react-router, you might want to use <Link to="/some/page" /> rather than the <a> tag.

To do this, you need to use the containerElement prop

<MenuItem  linkButton  containerElement={<Link to="/profile" />}  primaryText="Profile"  leftIcon={    <FontIcon className="material-icons">people</FontIcon>  }/>

(the ={true} can be omitted if you're only passing true,in other words, <MenuItem linkButton /> is same as <MenuItem linkButton={true} />)

The containerElement and linkButton props is actually documented in the buttons section, but you can use it in MenuItem as well.

Starting with Material-UI 1.0, the new syntax is:

<MenuItem  component={Link}  // the 'to' prop (and any other props not recognized by MenuItem itself)  // will be passed down to the Link component  to="/profile">  Profile</MenuItem>

(Note: this example doesn't include an icon. There is a new ListItemIcon component for that.)

You can set the linkButtton prop on MenuItem to generate a link, then also add an href.

<MenuItem linkButton={true} href="link/to/some/page" primaryText="Sample Link" />