57

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?

Alexander Abakumov
  • 13,617
  • 16
  • 88
  • 129
Krystian Cybulski
  • 10,789
  • 12
  • 67
  • 98
  • possible duplicate of [Disabled dropdown menu items using twitter bootstrap](http://stackoverflow.com/questions/9682082/disabled-dropdown-menu-items-using-twitter-bootstrap) – Marijn Mar 26 '14 at 09:50

8 Answers8

80

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.

gustavohenke
  • 40,997
  • 14
  • 121
  • 129
  • 3
    when combining bootstrap with some frameworks (eg. knockout), click binds may persist using the above way. Using `.unbind("click");` instead did the trick for me in order to prevent a click data-bind. – ılǝ Jun 18 '15 at 14:13
  • Thanks for the tip, @ılǝ For anyone else wondering which library the `.unbind('click')` is coming from, that would be jquery – bkwdesign Sep 03 '15 at 19:42
  • 1
    Wonder why this was not accepted as the answer because the accepted one would have required the user to use JavaScript, whereas here there was no such need of it at all – Sparker0i Nov 10 '18 at 07:06
28

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.

Jpsy
  • 20,077
  • 7
  • 118
  • 115
4

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;
        }
    }
}
Chris
  • 1,508
  • 1
  • 11
  • 30
3

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.

Chloe
  • 483
  • 4
  • 14
3

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="#">
ARealWant
  • 91
  • 5
1

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)
Yehezkel Yehoshua
  • 11
  • 5
0

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>
powderllama
  • 21
  • 1
-1

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();
Luis Cabrera Benito
  • 1,558
  • 13
  • 21