CODEWITHSUNDEEP
reactjsmaterial-uihref
Caio Henrique Samarone
Caio Henrique Samarone

Reputation: 87

how to menu item redirect to a link using href?

I'm using MenuItem from material-ui, and I want to open a link in a new tab when the menu item is clicked. I'm using simple: <MenuItem href="www.google.com" onClick={handleClose}> Google </MenuItem>

But nothing happens. Anyone know why?

Upvotes: 4

Views: 5182

Answers (2)

Brian Thompson
Brian Thompson

Reputation: 14355

Material-ui's MenuItem does not have an href prop, so it will pass that down to the root element (li tag by default).

If you want to use an href you would need to use an a tag as the component, which would then pass down the href to it instead of an li. To open it in a new tab you need to also give it a prop target="_blank".

Result:

<MenuItem 
  href="www.google.com"
  target="_blank"
  component="a" 
  onClick={handleClose}
> Google </MenuItem>

Upvotes: 11

Sandro Mennel
Sandro Mennel

Reputation: 82

You can write in the onClick={window.location.href = "www.google.com"}

Upvotes: 0

Related Questions