Material-ui: ListItem link?

Created on 7 Oct 2015  路  3Comments  路  Source: mui-org/material-ui

How do I make a ListItem into a link?

I tried wrapping it with an achor tag but that didn't work. I didn't see a property in http://material-ui.com/#/components/lists. I would prefer to avoid using event handlers so that the hover shows a URL.

Most helpful comment

Use the containerElement with linkButton props!

see:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

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

or if you're not using react-router, simply use

<MenuItem linkButton href="/profile" primaryText="Profile" />

All 3 comments

I'm having the opposite problem. I would like it prevent it from rendering as a link. I'm getting a nested link error when using an IconMenu with MenuItems inside of a ListItem. Its working in the docs though, so maybe I'm doing something wrong.

ListItem > EnhancedButton > a > ... > IconMenu > ReactTransitionGroup > Menu > MenuItem > ListItem > EnhancedButton > a.

Is there any way to prevent this? I know it's a different problem than @sys13, but it might have the same solution.

Use the containerElement with linkButton props!

see:
http://stackoverflow.com/questions/32106513/material-ui-menu-using-routes/34507786#34507786

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

or if you're not using react-router, simply use

<MenuItem linkButton href="/profile" primaryText="Profile" />

This was fixed in #2708

Was this page helpful?
0 / 5 - 0 ratings