ThinkGeek
ThinkGeek

Reputation: 5127

React button dropdown menu

In my react application one of the component is creating a button dropdown menu like below.

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a onClick=doSomething href="#">HTML</a></li>
      <li><a onClick=doSomething href="#">CSS</a></li>
      <li><a onClick=doSomething href="#">JavaScript</a></li>
    </ul>   
</div>

Questions:

  1. Giving href as # on anchor tag changes the url by appending #. If href is not given then hand click icon is not seen on menu while hovering over it. I don't want to change the URL and at the same time I want the hand icon to come on the dropdown menu.

  2. Can I prevent default href behavior by some method like preventDefault or something similar?

  3. Should I use button from react-bootstrap or this native html button is fine?

Upvotes: 1

Views: 2063

Answers (2)

Sagiv b.g
Sagiv b.g

Reputation: 31024

You can use the CSS cursor: pointer;

li{
  cursor: pointer;
}
 <ul class="dropdown-menu">
      <li>HTML</li>
      <li>CSS</li>
      <li>JavaScript</li>
    </ul>

Upvotes: 1

Ferry
Ferry

Reputation: 340

Just add a style for the <a> tag and remove your href attribute.

a {
    cursor: pointer;
}

Upvotes: 1

Related Questions