[material-ui][MenuItem] The href property is ignored

[serhiiminin]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:
https://codesandbox.io/p/sandbox/morning-cache-zxmq6m?file=%2Fsrc%2FDemo.tsx%3A60%2C13

Steps:

1. Open dev tools
2. Check HTML for menu items

Current behavior 😯

"href" property does turn a menu item into a link

Expected behavior 🤔

MenuItem is rendered as a link when providing "href" property

Context 🔦

I am building a navigation menu button
https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/examples/menu-button-links/
I want my MenuItems to be links

<li>
<a href="/example">Menu item</a>
</li>

Also, MenuItem does not accept the "component" property, so I can't do this https://stackoverflow.com/a/64038036

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[mj12albert]

@serhiiminin I thought we would have a demo for this, but you can achieve the markup in the APG example like this:

<MenuItem role="none">
    <Link role="menuitem" href="/profile">
        Profile
    </Link>
</MenuItem>

Here's a working sandbox

[serhiiminin]

Hi @mj12albert
Thank you for the reply!
In your proposed approach, the link should be styled additionally, since it does not have the full width and height of the MenuItem. It leads to the situation when not the whole MenuItem is clickable.

Also, the docs says the following

Props of the ButtonBase component are also available

It feels like MenuItem should support "href" property and do everything automagically 🤔

[ZeeshanTamboli]

Also, MenuItem does not accept the "component" property, so I can't do this https://stackoverflow.com/a/64038036

@serhiiminin MenuItem does accept the component property. If you encounter a TypeScript type error, it may be due to an outdated Material UI version you are using. Updating to the latest version should resolve this. Here is the updated CodeSandbox: https://codesandbox.io/p/sandbox/gifted-noyce-2dsvw4?file=%2Fsrc%2FDemo.tsx%3A66%2C25.

Ensure you provide the component="a" property to MenuItem instead of expecting the href property to change the item to an anchor element.

Props of the ButtonBase component are also available

It feels like MenuItem should support "href" property and do everything automagically 🤔

Ye it's mentioned in the docs but this is due to the logic of the ButtonBase component, as explained here: #28335 (comment).

So, should we close this issue?

[serhiiminin]

@ZeeshanTamboli thank you for the response.
Indeed, it accepts "component" property and I can provide "a" there.
However, in this case, I'll need to provide a custom component to wrap the "a" tag within an "li" element and handle keyboard. Which is probably fine based on the API

I think we can close the issue. Thank you!