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 good source / tutorial? The documentation falls short, and both components seem not to support 'menuItems' as property as LeftNav does.

DaxChen · Accepted Answer · 2020-09-04T21:52:39.813

65

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.

edited Sep 04 '20 at 21:52

answered Dec 29 '15 at 09:03

DaxChen

1,791
1
14
21

link now broken and cannot see any button link docs anywhere on the site. This might be what I am after so thanks for posting. I am not sure what you mean by te true stuff ? – landed May 16 '16 at 15:16
1

Updated, thanks for reminding! (Updated the true stuff too) – DaxChen May 16 '16 at 18:43
I also see the onTouchTap is a way to get an event from interacting with a menu item. – landed May 17 '16 at 13:02
Yeah, but using `onTouchTap`/`onClick` to trigger page change instead of ``/`` you lose some native functions such as the link preview in browser, and the ability for users to open link in a new tab. – DaxChen May 17 '16 at 18:19
This does not work for me, see https://github.com/callemall/material-ui/issues/204#issuecomment-296499846 – daydreamer Apr 24 '17 at 00:24
Not working in 2020 , containerElement no longer supported – leonbloy Jun 12 '20 at 21:33
In 2021 you should use this solution: https://stackoverflow.com/a/49019285/1757878 – piotros Mar 02 '21 at 09:07

Matt Browne · Answer 2 · 2019-06-24T17:56:45.327

32

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

edited Jun 24 '19 at 17:56

answered Feb 27 '18 at 22:55

Matt Browne

11,673
4
53
73

Perfect... As I needed. – prem30488 Oct 24 '19 at 06:25
This works with `ListItem` from Material UI as well. – piotros Mar 02 '21 at 08:59
Works in v5, which the top answer didn't for me – dading84 Mar 08 '22 at 16:03
Not a fan of passing down props implicitly, plus it wont work with typescript. Way better to just do this: `component={()=>}` – ICW Apr 18 '22 at 18:33

score 14 · Answer 3 · answered Aug 25 '15 at 20:15

14

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

answered Aug 25 '15 at 20:15

Hai Nguyen

3,973
1
18
16

7

If this was true, it doesn't seem to be true anymore, unfortunately. – user1175849 Oct 19 '16 at 01:22

Simon · Answer 4 · 2020-05-04T07:00:02.673

11

None of the existing answers (of September 2018) worked for me with react 16.4.2 and react-router 4.2.2, so this was my solution:

<Link to='/notifications' style={{ textDecoration: 'none' }}>
   <MenuItem>Notifications</MenuItem>
</Link>

As you can see, the MenuItem component is surrounded by the Link component, and I added a style textDecoration: 'none' not to have the item underlined.

edited May 04 '20 at 07:00

answered Sep 27 '18 at 11:54

Simon

5,502
5
38
86

1

I had to add `outline: "none"` too. – CorayThan Mar 24 '19 at 03:59
5

Thank you. It's amazing that such basic info is missing from https://material-ui.com/components/menus/ – Igor K Oct 29 '19 at 19:30

score 7 · Answer 5 · answered Nov 17 '16 at 11:21

7

The prop linkButton of EnhancedButton is deprecated. LinkButton is no longer required when the href property is provided. It will be removed with v0.16.0.

<MenuItem onTouchTap={this.handleClose} href="/link/data">Link Item</MenuItem>

Works fine

answered Nov 17 '16 at 11:21

Shashwat

487
4
8

this is the best answer as of 11/29/2016 you can also use things like `target="_blank"` to get the link to open in a new browser window – Chris Sprance Nov 29 '16 at 06:42
This is an option but that will reload the whole page, while `Link`'s element doesn't. It's possible instead to simply wrap the `MenuItem`: ```Home``` – keepthepeach Nov 29 '16 at 07:18

score 7 · Answer 6 · answered Sep 24 '20 at 00:40

7

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>

answered Sep 24 '20 at 00:40

Kal

1,241
2
17
32

It works but you should be aware that using `a` causes page reloads. – piotros Mar 02 '21 at 09:02

score 4 · Answer 7 · answered Dec 04 '20 at 10:03

4

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>

answered Dec 04 '20 at 10:03

Maxime Brehin

337
5
4

2

It works but you should be aware that using `a` causes page reloads. – piotros Mar 02 '21 at 09:02
What's the implication of `a` causing page reloads? – jkschin Mar 19 '21 at 01:47
@jkschin react is typically used in a single page application manner (SPA), wherein one of the benefits is avoiding full page reloads. – Will Jun 11 '21 at 18:00

score 3 · Answer 8 · answered Aug 03 '19 at 21:29

After doing a little searching myself I went with a slightly different solution:

<MenuItem onClick={() => {handleClose("/#about")}}>About me</MenuItem>

With a supporting JS function:

function handleClose(nav) {
    window.location.href = nav;
}

Hopefully proves of use as an alternative.

score 3 · Answer 9 · answered Sep 25 '21 at 22:55

import Menu from '@material-ui/core/Menu';
import MenuItem from '@material-ui/core/MenuItem';
import { Link } from 'react-router-dom';


<MenuItem component={Link} to='/login'>
       Login
</MenuItem>

That worked for me, September 2021, by using React Router and the Link prop of the MenuItem.

score 1 · Answer 10 · edited Mar 19 '19 at 21:17

onTouchTap doesn't work for me I have to use onClick see the example below

  <MenuItem 
    onClick={this.logout}
    containerElement={<Link to="/" />}
    primaryText="Sign out"
    rightIcon={
      <b style={style.rightIcon}>
        <img
          className="menu-img"
          src="img/app/logout.png"
          alt="logout"
        />
      </b>
    }
  />

hope this will help others as well

score 1 · Answer 11 · answered Jan 01 '20 at 18:58

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>

score 1 · Answer 12 · answered Dec 01 '21 at 13:34

1

From v5.2.2 you can use:

import { MenuItem } from '@mui/material';
import { Link } from 'react-router-dom';

<MenuItem component={Link} to="/profile">
  Profile
</MenuItem>

answered Dec 01 '21 at 13:34

Petr K.

400
3
12

score 1 · Answer 13 · answered Feb 14 '22 at 04:57

This worked for me with the v5

for external links

<MenuItem
    component={"a"}
    href={"https://example.com"}
>Go here</MenuItem>

or internal links

import { MenuItem } from "@mui/material";
import { Link } from "react-router-dom";
<MenuItem
    component={Link}
    to={"/users/2323"}
>Go here</MenuItem>

score 0 · Answer 14 · edited Mar 19 '19 at 21:20

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>

score 0 · Answer 15 · answered Apr 14 '17 at 12:48

0

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

answered Apr 14 '17 at 12:48

JohnnyQ

4,467
6
42
61

It doesn't help to just down vote an answer without any explanation. – JohnnyQ Oct 26 '17 at 01:11

score 0 · Answer 16 · answered Jun 02 '22 at 06:54

We should use <Link> tag out side of <MenuItem> tag

Error:

     <MenuItem>
        <ListItemText>
            <Link to='/ticket-blotter' style={{ textDecoration: 'none' }}>
                TICKET BLOTTER 
            </Link>
        </ListItemText>
     </MenuItem>

Solution:

        <Link to='/ticket-blotter' style={{ textDecoration: 'none' }}>
            <MenuItem>
                <ListItemText>
                    TICKET BLOTTER
                </ListItemText>
            </MenuItem>
        </Link>

score 0 · Answer 17 · answered Jun 03 '22 at 08:07

You can try this way as well

import { useHistory } from 'react-router-dom';

const YourComponentName = () =>{
  
    const history = useHistory();
    const handleRoutes = (path) =>{
       history.push(path)
    }
    
  return(
    <>
      ...
      <MenuItem onClick={()=>handleRoutes('/dashboard')}>Dashboard</MenuItem>
      <MenuItem onClick={()=>handleRoutes('/profile')}>Profile</MenuItem>
      ...
    </>
)
}

Material UI Menu using routes

17 Answers17

Linked