[MenuItem] Links within Menu items #204
Comments
|
I'm wondering about this as well. I'm using server-side rendering in my application, this is something to look into. |
|
Using anchor elements with |
|
+1 |
4 similar comments
|
+1 |
|
+1 |
|
+1 |
|
+1 |
|
+1 |
1 similar comment
|
+1 |
|
this is possible with what @shaurya947 suggested. |
|
I'm attempting to use let menuItems = (
<div>
<MenuItem primaryText="Doors" leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} /></a>
<MenuItem primaryText="Load" leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
<MenuItem primaryText="Notes" leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
<MenuItem primaryText="Alerts" leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
<MenuItem primaryText="Admin" leftIcon={<FontIcon className="material-icons" color={GlobalStyles.default.activeColor}>home</FontIcon>} />
</div>
);
return (
<LeftNav
ref="leftNav"
docked={false}
onChange={this._onLeftNavChange}
>
{menuItems}
</LeftNav>
)Wrapping a If you do a React inspection of the output you get the following. <a href="/">
<MenuItem..>
<ListItem..>
<div>
<EnhancedButton..>
<a>
<TouchRipple ..>
</a>
</EnhancedButton>
</div>
</ListItem>
</MenuItem>
</a>which having nested
Using a MenuItem object as a prop for LeftNav gets the linking working, but I have not been able to figure out how to add left/right Icons this way. ie: let menuItems = [
{ route: '/load_areas/'+ this.state.area + '/doors', text: 'Doors' },
{ route: '/load_areas/'+ this.state.area + '/trailer_loads', text: 'Load' },
{ route: 'notes', text: 'Notes' },
{ route: 'alerts', text: 'Alerts' },
{ route: 'admin', text: 'Admin' }
];
<LeftNav
ref="leftNav"
docked={false}
menuItems={menuItems}
onChange={this._onLeftNavChange}
/> |
|
this is a separate issue, please open one, so we can label it and add it to milestones, tnx 😁 |
|
Use the see: <MenuItem
containerElement={<Link to="/profile" />}
primaryText="Profile"
leftIcon={
<FontIcon className="material-icons">people</FontIcon>
} /> |
|
Now the prop For example: |
|
href reloads page. how about if i want to use react router |
|
@cezarneaga try |
documentation mentions you need to enter also |
|
@DaxChen I saw your stackoverflow updated answer for Dec 2016(Extremely Recent haha) and I was wondering if you knew if this worked for a MenuItem within a Drawer? I'm trying the following below and have been totally unable to get Link working with the MenuItem as containerElement seems to do nothing. |
|
containerElement works but isn't documented, so I guess this thread will have to serve as the official documentation for now. Thanks! |
|
Hi @Faolain ! Really sorry for the late reply... Anyway, here's an Example Repo, and the Live Demo Here. If you still can't find the cause of your problem, can you provide a sample repo to reproduce? |
|
None of the solutions above worked on Safari and iOS. So here's what I did as a work around for |
|
@janzenz is this example here not working in your browser? I tried it in Safari on macOS and Safari on iOS and they all work. Is this not working for you? Although your workaround works, it may cause bad SEO and you'll lose some native behavior such as link-preview and option-click to open in new tab. |
|
@DaxChen thanks for the insights. I'm not sure if my issue is related with your first link. I've already tried the 2nd one but once I add a |
|
@janzenz I've added |
|
@DaxChen I see you're using |
|
@janzenz I was using an older version, just updated to the latest |
|
Touché! Probably my setup then. Thanks for confirming that @DaxChen I'll get back to this thread if I have found the real issue. |
|
@DaxChen , I tried the example you gave me, but it fails My code is available at https://github.com/hhimanshu/spicyveggie/tree/cards ( I am not sure what is different, but it just does not work @janzenz @Oduig, None of these things worked for me. My code is available at https://github.com/hhimanshu/spicyveggie/tree/cards ( |
|
@hhimanshu change this line to |
|
@DaxChen, thanks. That was it. However, not when my page loads with
|
|
@hhimanshu that's because you used only the Nest your You can use react-devtools to check the rendered component hierarchy and its states! This is not related to material-ui, please read more in react-router's tutorials/docs. |
|
Thanks @DaxChen, I solved it as https://github.com/hhimanshu/spicyveggie/blob/master/src/index.js#L20 |
|
+1 |
|
Workarounds for links HANDLED & NOT HANDLED by React Router. If target link is handled by React Router MenuItemLink.js Sample Code: If target link is NOT handled by React Router, ie: request is forwarded to an API server or whatever onClick function: Sample Code: |
|
I'm coming to add to this, in case someone else stumbled upon it as well. On v3.4, you can achieve this like so: import { Link } from 'react-router-dom';
import MenuItem from '@material-ui/core/MenuItem';
...
<MenuItem component={Link} to="/your-path">...</MenuItem> |
|
The only solution that worked for me without breaking the Menu layout was: <MenuList>
<Link to='/your-path' style={{ textDecoration: 'none' }}>
<MenuItem>
Notifications
</MenuItem>
</Link>
<Link to='/your-path' style={{ textDecoration: 'none' }}>
<MenuItem>
Profile
</MenuItem>
</Link>
</MenuList> |
@eladlevy This would end up in a poor semantics HTML. |
|
Leaving this here in case it helps anyone (running v3.9.0). I needed a <Select value={currentLanguage}>
{languages.map(language => (
<ListItem
button
component={btnProps => (
<Link
to={ `/things?lang=${ language }` }
{...btnProps as any}
/>
)}
value={language}
key={language}
>
{language}
</ListItem>
))}
</Select>This was the cleanest solution I could find that required minimal TypeScript casting and maintained visuals consistent with Material UI. |
|
@goyney has the solution, thanks |
Working and clean solution, thanks ❤️ |
|
For external links you'll want to use This generates the following HTML: |
|
Suppose I have a popup menu and use import { Link } from 'react-router-dom'; <MenuItem component={Link} to="/your-path"></MenuItem> The Link will bring up the /your-path page, how would one close the popup menu? |
and others
Hi, I was looking at the current implementation of menu items and noticed that there is no actual link (meaning, html
<a>tag). As a result, for instance, even in the navigation bar there is no actual link, and transitions to other pages are managed via onclick events.I think having links would be an improvement, especially considering server-side rendered pages.
Do you think this make sense, or do you have specific reasons to not go in this direction?
The text was updated successfully, but these errors were encountered: