Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[QUESTION] How to use anchor as menu item #41

Open
erzzo opened this issue Mar 15, 2021 · 2 comments
Open

[QUESTION] How to use anchor as menu item #41

erzzo opened this issue Mar 15, 2021 · 2 comments

Comments

@erzzo
Copy link

erzzo commented Mar 15, 2021

Hey,
The dropdown menu is working great but I'm struggling to change the menu item to a anchor.
I've changed the element like in the example:

   <MenuItem
      componentClass={Link}
      href="/reports"
    >
      Button Label
    </MenuItem>

and the result is:

image

The href attribute is not applied to the parent element.
How can I achieve this?
Thanks for help

@Ginioo
Copy link

Ginioo commented Mar 16, 2021

Hi @erzzo ,

Could you please try this?

<MenuItem
  componentClass={() => <Link href="/some/url">Link</Link>}
>
  Button label
</MenuItem>

@erzzo
Copy link
Author

erzzo commented Mar 16, 2021

@Ginioo I've tried something like that earlier:

<MenuItem
  componentClass={() => <Link href="/some/url" />}
>
  Button label
</MenuItem>

But it didn't compile. The missing children was the problem. When I tried your example, it did work
but it will replace the whole element. So I needed to pass the props. It's working but it's little bit messy.

<MenuItem
  componentClass={(props) =>
    <div {...props}>
      <Link to={submenuItem.internalLink} {...props.children[0].props}>
         Label
      </Link>
    </div>
  }
/>

I will play more with it, probably this can be something the package could do nativly. Realy thanks for your help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants