[Feature Request]: Support the ability to make the MenuItem component a clickable link

[AbrahamLara]

trafficstars

The problem

I am implementing a feature for a chat bot that allows developers to add custom elements to the chat header. The custom elements are a link, menu (w/submenus), and buttons.

Even if the web chat is a larger size, there is only so much you can fit into the chat header. This is where the Menu component is useful for a developer who wants to fit more elements in the chat header that can't all be displayed at once.

The problem at the moment is that developers will be able to add Menus with custom buttons and submenus that can't fit in the header, but they won't be able to add links to menus because the MenuItem component doesn't support anchor element attributes as props (href, target, etc.).

The solution

I would like for the MenuItem component to support anchor element attributes so that it can be a link in order to help complete the feature I'm working on.

Examples

• OverflowMenuItem component props

Application/PAL

No response

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct

[github-actions[bot]]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[alina-jacob]

Adding the relevant Slack thread 1 and thread 2, shared by Taylor for context!

[adamalston]

I think I'm encountering the same issue as the issue author except I can define an href. I just can't add target or rel attributes without getting errors since they aren't typed. If I ignore the errors, the attributes work fine.

Reproduction for the target and rel issues: https://stackblitz.com/edit/github-9smbll?file=src%2FApp.tsx. I think just adding types will resolve the issue since there's already a rest parameter in the code: https://github.com/carbon-design-system/carbon/blob/c52884cfc64972d75e133a698417e8d6dab588a3/packages/react/src/components/OverflowMenuItem/OverflowMenuItem.tsx#L184

[aagonzales]

Summary from the Slack threads: Yes, this is an enhancement we want to add.

[nithinssabu]

Summary from the Slack threads: Yes, this is an enhancement we want to add.

Is this going to support just anchor element attributes; would client side routing work in that case?

I have a similar use case. The MenuItem should navigate to a route within the application (client-side, I'm using the Link component from react-router-dom) when clicked but at the same time, users should have the option to open the page in a separate tab (standard browser action which also works with Cmd + Click).

Another option would be to add the possibility to pass a React component as the label instead of just a string.