Reputation: 5127
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:
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.
Can I prevent default href behavior by some method like preventDefault or something similar?
Should I use button from react-bootstrap or this native html button is fine?
Upvotes: 1
Views: 2063
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
Reputation: 340
Just add a style for the <a>
tag and remove your href
attribute.
a {
cursor: pointer;
}
Upvotes: 1