CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
theJuls
theJuls

Reputation: 7460

Wrap React Semantic-UI Menu.Item in anchor tag without ruining it styles

I have a React Semantic Ui menu which has to link to another page. I am trying to wrap it with an anchor tag, but this completely breaks the styles on the menu buttons. I would like to think I'm doing something wrong before assuming it's a but.

This is what my code currently looks like:

<Menu tabular attached='top'>
   <a href={item1Url}><Menu.Item link>item1</Menu.Item></a>
   <a href={item2Url}><Menu.Item active link>Item 2</Menu.Item></a>
</Menu>

Before wrapping the Menu.Item with the a tag, this is what it currently looked like:

enter image description here

With the a tag wrapping it, it looks like this:

enter image description here

Not to mention that it disappears completely when I hover on it. Am I doing something wrong?

Upvotes: 2

Views: 1324

Answers (1)

ChrisR
ChrisR

Reputation: 4008

If you look at the doc, you can directly add the href (and target) attributes to the Menu.Item element.

In your case the result would be:

<Menu tabular attached='top'>
   <Menu.Item href="item1Url">item1</Menu.Item></a>
   <Menu.Item href="item2Url"active>Item 2</Menu.Item></a>
</Menu>

Upvotes: 3

Related Questions