Add disabled states to navs and dropdowns

[cnicodeme]

Hey, I didn't find any style for disabled state of links in a nav, so here it is :

.nav-list>.disabled>a {
    color: #999;
    cursor: default;
}

.nav-list>.disabled>a:hover {
    background-color: transparent;
}

(update: changing .nav to .nav-list).

This also works for .nav-tabs & .nav-pills :

.nav-tabs>.disabled>a, .nav-pills>.disabled>a {
    color: #999;
    cursor: default;
    border: none; /** add this for tabs/pills **/
}

.nav-tabs>.disabled>a:hover, .nav-pills>.disabled>a:hover {
    background-color: transparent;
}

[mdo]

Edited title to tackle two items with one stone: disabled items in both navs and dropdowns.

[NelsonReis]

I've managed to add this feature on the sidebar with:

// Add disabled state for items in sidebar
.nav > li.disabled {
  .opacity(40);
  pointer-events: none;
}
.nav > li.disabled > a:hover {
  cursor: default;
  text-decoration: none;
  background-color: inherit;
}

Also had to include some JavaScript so that IE users could not click on the links:

$('ul.nav-list > li.disabled > a').click(function () { return false; });

[pixelyunicorn]

👍

[mdo]

Added to 2.1.0-wip.

[ckizer]

This doesn't seem to work with button menus in 2.1.0-wip, can it be added?

[ckizer]

Since menu hover states have changed to a gradient background:

.dropdown-menu>.disabled>a:hover, 
.dropdown-menu>.disabled>a:hover {
    background-color: transparent;
}

Needs to be changed to this in source!

background: transparent;