How to make a .nav-link inactive?

I am using a Bootstrap nav-bar for a wizard progress indicator. I want to make sure that steps of the wizard which have not been visited yet are not clickable. I would like them to appear in the nav-bar, but have them be greyed out and the links be disabled.

Can this be done in the Bootstrap nav-bar?

You can add the disabled class to the container <li>:

<ul class="nav nav-list">
   <li class="disabled"><a href="index.html">...</a></li>
</ul>

However, to disallow users clicking them, you should use JavaScript to prevent this:

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

Another way is replacing the href property with an anchor (#) temporarily.

The right way to do this is using an <a>nchor tag without href attribute.

While this is a hardly known technique it is totally valid HTML and leads to an element with all the styling that is attributed to the <a> tag but with no linking functionality.

<ul class="nav nav-list">
   <li><a>...</a></li>
</ul>

See W3C's HTML specification for technical background:

> If the a element has no href attribute, then the element represents a > placeholder for where a link might otherwise have been placed, if it > had been relevant, consisting of just the element's contents.

This can be done completly in CSS (unless you need to support ie <11) with the pointer-events property. However, by turning pointer events off for a I also no longer get the not-allowed cursor, so I set it on the disabled li. (I know this question is quite old but is still the first search result)

This is my SCSS for that purpose:

ul.nav {
	li.disabled {
		cursor: not-allowed;
		
		a {
			pointer-events: none;
		}
	}
}

I would like to add that just adding disabled will not prevent navigation. In addition, the answers jquery solution will work, however if you add or remove the disabled class, it will not unbind the handler.

This can be solved by changing the event handler to use the .on method of jquery.

$('body').on('click', '.disabled', function(e) {
    e.preventDefault();
    return false;
});

This attaches a handler to body(make sure to replace body with your container) and filter by disabled. Anytime body is clicked, if what is clicked has disabled, it prevents the click.

Check out http://api.jquery.com/on/ for more info.

The easiest way would be just to change the class from nav-link to nav-link disabled.

Like this:

<a class="nav-link disabled" href="#">

In order to disable a nav link you need to disable both the li and a tags. But that may prove a bit tricky when using razor syntax. Adding the disabled class to the li works fine but it doesn't disable the action on the a tag. So, similar to gustavohenke solution but a bit refined try this in your document ready function.

$(".nav li.disabled a").prop("disabled",true)

To preserve your value in the href. You can use onclick="return false;" to toggle the anchor tag. Use the bootstrap disabled css class to gray out the menu item.

var enableMyLink = false;

if (enableMyLink) {
  $("li").removeClass("disabled").find("a").removeAttr("onclick");
} else {
  $("li").addClass("disabled").find("a").attr("onclick", "return false;");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<li>
  <a href="http://sample.com/">My Link</a>
</li>

First, you should add an id to the ul:

<ul class="nav navbar-nav navbar-right" id="someId">
            <li><a>Element</a></li>
</ul>

You can hide the ul, by example:

$(document).find('ul#someId').hide();

and when you wish, you can show the ul:

$(document).find('ul#someId').show();