How to make a Bootstrap navbar item unclickable?

Question

In the navbar example on the bootstrap site, I would like to programmatically make one of the Navbar items (let's say the About link) disabled/unclickable.

I've tried .addClass('disabled'), .removeClass('active'), but nothing seems to work.

Am I missing something simple?

Answer 1

If you want to make a click on a menu item not do anything, you can use the following jQuery syntax to disable its effect:

$(/* jQuery selector for menu item */).click(function(e) {
     e.preventDefault();
});

Then you can style the button with a "disabled" or gray color if you desire, so that the user knows it is unclickable. This solution is compatible with all browsers that support jQuery.

Here is a JSFiddle demo of this solution (thanks to @Adjit in the comments!): http://jsfiddle.net/7a2p8jjn/1/

Answer 2

You can just add pointer-events: none as the style of the element. Example with jquery:

$('.navbar-nav').find('a[href=#about]').css('pointer-events', 'none')

p.s.: as @maximillian-laumeister said this solution is not compatible with IE10 and earlier.

Answer 3

just add class .disabled

<li class="disabled"><a href="#about">About</a></li>

and then in your javascript

$(document).ready(function() {
   $(".nav li.disabled").click(function() { return false; });
});

here you can see an example

of course you can add a class disabled to the item with jQuery addClass method also