How to make a .nav-link inactive?

twitter-bootstrap

Solution

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.

Problem

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`?

Original source

Related problems