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.
17 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.
-
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 ?– landedMay 16, 2016 at 15:16
-
1
-
I also see the onTouchTap is a way to get an event from interacting with a menu item.– landedMay 17, 2016 at 13:02
-
Yeah, but using
onTouchTap
/onClick
to trigger page change instead of<a>
/<Link />
you lose some native functions such as the link preview in browser, and the ability for users to open link in a new tab.– DaxChenMay 17, 2016 at 18:19 -
This does not work for me, see github.com/callemall/material-ui/issues/… Apr 24, 2017 at 0:24
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.)
-
-
-
-
Not a fan of passing down props implicitly, plus it wont work with typescript. Way better to just do this:
component={()=><Link to='/profile'/>}
– ICWApr 18 at 18:33
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" />
-
7If this was true, it doesn't seem to be true anymore, unfortunately. Oct 19, 2016 at 1:22
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.
-
1
-
5Thank you. It's amazing that such basic info is missing from material-ui.com/components/menus– Igor KOct 29, 2019 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>
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
-
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 Nov 29, 2016 at 6: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 theMenuItem
:<Link to='/'><MenuItem>Home</MenuItem></Link>
Nov 29, 2016 at 7:18
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>
-
2
-
-
@jkschin react is typically used in a single page application manner (SPA), wherein one of the benefits is avoiding full page reloads.– WillJun 11, 2021 at 18:00
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.
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.
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>
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>
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>
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"
/>
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>
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>
This way worked for me
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>
...
</>
)
}