Search code examples
reactjsmaterial-designmaterial-ui

Material UI Menu using routes


I am toying with material-ui. I implemented LeftNav using routes, but I could not find a way to get IconMenu, or Menu working with links or routes. Anyone can point me to a good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does.


Solution

  • 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.