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.
12 Answers
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.
![](../../users/profiles/4997172.webp)
- 1,726
- 1
- 13
- 20
-
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
-
1Updated, 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
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.)
![](../../users/profiles/560114.webp)
- 10,953
- 4
- 50
- 70
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" />
![](../../users/profiles/1330215.webp)
- 3,943
- 1
- 17
- 16
-
6If this was true, it doesn't seem to be true anymore, unfortunately. – user1175849 Oct 19 '16 at 01:22
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
![](../../users/profiles/3540709.webp)
- 447
- 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`: `````` – keepthepeach Nov 29 '16 at 07:18
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.
![](../../users/profiles/3581976.webp)
- 4,844
- 4
- 32
- 69
-
1
-
2Thank 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
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>
![](../../users/profiles/3717114.webp)
- 882
- 10
- 23
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>
![](../../users/profiles/5068717.webp)
- 297
- 3
- 4
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.
![](../../users/profiles/6103741.webp)
- 325
- 1
- 2
- 13
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
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>
![](../../users/profiles/4051190.webp)
- 124
- 1
- 5
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>
![](../../users/profiles/1120027.webp)
- 9,783
- 7
- 72
- 84
![](../../users/profiles/5533594.webp)
- 145
- 1
- 4
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"
/>
![](../../users/profiles/1150527.webp)
- 3,997
- 4
- 38
- 57