how to menu item redirect to a link using href?

Question

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?

Answer 1

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>