Material UI Menu using routes

Question

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

Answer 1

I couldn't make the containerElement work on Safari in iOS with react-router. I'm using 0.17.2 of Material UI and react-router@v3 and here's a work around that worked for me:

  <MenuItem
    onTouchTap={() => {
      this._yourMethod()
      browserHistory.push('/howItWorks')
    }}
    primaryText="Menu Link"
  />

Answer 2

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" />

Answer 3

You can use react-route-dom and MenuItem onClick attribute first import react-router-dom: import { useHistory } from 'react-router-dom' then declare a function to handle your onClick within your component: const navigate = () => history.push('route/to/navigate') and then user your MenuItem <MenuItem onClick={navigate}>Navigate</MenuItem>

Answer 4

Here is my implementation, which looks exactly like what in the material-ui official website. The component you can use include AppBar, Drawer and ListItem. The SelectableList can be implemented as let SelectableList = MakeSelectable(List).

<div>
  <AppBar 
    onLeftIconButtonTouchTap={this.handleLeftIconButtonTouchTap}
    title={title}
    showMenuIconButton={true}
    zDepth={0}
  />
    <Drawer 
      open={this.state.open} 
      docked={true} 
      onRequestChange={(open, reason) => {
        this.setState({open:false})
      }}
    >
      <AppBar title={title} />
      <SelectableList
        value={location.pathname}
        onChange={this.handleRequestChangeList}
       >
        <Subheader>Selectable Contacts</Subheader>
        <ListItem
          value={"link1"}
          primaryText="Link1"
        />
        <ListItem
          value={"link2"}
          primaryText="Link2"
        />
      </SelectableList>
    </Drawer>
 </div>

Answer 5

As of Sep 2020, only thing that works and is super simple is

<MenuItem component="a" href="/your-path">Click Me</MenuItem>

Bonus: To add icon with a badge:

<MenuItem component="a" href="/your-path">
        <IconButton color="inherit" href="/your-path">
              <Badge badgeContent="12" color="secondary">
                <StarsSharpIcon color="action"/>
              </Badge>
        </IconButton>
Click Me
</MenuItem>

Answer 6

Using M-UI 4.x you can set a component prop on MenuItem and to something like

<MenuItem component='a' href='link/to/some/page'>Sample Link</MenuItem>