Disabled dropdown menu items using twitter bootstrap

Question

I use markup to display a dropdown menu using Twitter Bootstrap.

<ul class="nav pull-right">
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Menu item 1...</a></li>
            <li class="divider"></li>
            <li><a href="#">Menu item 2...</a></li>
            <li><a href="#">Menu item 3</a></li>
        </ul>
    </li>
</ul>

I want to be able to make menu items appear disabled, i.e. no hover effect and probably a different text decoration to make the disabled state visible to the user.

What is the best way to accomplish this? Is there an exisisting bootstrap css class I can add to the <li> or <a> element?

You want the link to "appear" disabled but not actually disabled? — Andres I Perez
– Andres I Perez, Commented Mar 13, 2012 at 12:54
Sorry if the question was unclear. I want one or more menu items to be disabled (in every way, not only appearance). — codeape
– codeape, Commented Mar 13, 2012 at 13:19
And how are you expecting the events to take place, e.g. you want the buttons to become enabled if a certain action is taken? Or you're just looking for a way to easily disable the links with some jQuery? You can't fully disable a link with plain css. — Andres I Perez
– Andres I Perez, Commented Mar 13, 2012 at 13:33

Madhan · Accepted Answer · 2017-02-22 20:04:59Z

78

When outputing the code for a disabled drop down, why not simply use :

<li class='disabled'>
  <a href="#">Menu</a>
</li>

You can always add the caret back if you still want it to appear.

Update:
Adding W3Schools Link

edited Feb 22, 2017 at 20:04

Madhan

5,8484 gold badges31 silver badges61 bronze badges

answered Jan 5, 2013 at 19:21

Aeomer

7891 gold badge5 silver badges2 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ta.speot.is Over a year ago

+1 The documentation shows you this twitter.github.com/bootstrap/components.html#navs (under "Disabled state")

ta.speot.is Over a year ago

Also from the documentation, if you don't want links to be clickable then get rid of the href. Although retain the a for formatting.

NoOne Over a year ago

Good answer. The only thing I don't like about this is that Bootstrap allows the dropdown to close when the user clicks on the disabled item. Hm...

liteflier Over a year ago

When I tried this, the link "looked" disabled, but it could still be clicked on and used for navigation

Anthony Roberts Over a year ago

This is a great bootstrap style, but it has one problem, it doesn't actually stop the item from being clicked. @buzzy answer below takes care of this.

Andres I Perez · Accepted Answer · 2012-03-13 13:53:56Z

22

You can attach a custom disabled class to your menu link a tag that you want to disable and simply remove the default action by using preventDefault and targetting that class, like so:

$(".disabled-link").click(function(event) {
  event.preventDefault();
});

Then you can style all events from the .disabled-link with a grey backdrop or any style you like;

CSS

a.disabled-link,
a.disabled-link:visited ,
a.disabled-link:active,
a.disabled-link:hover {
    background-color:#d9d9d9 !important;
    color:#aaa !important;
}

Demo

answered Mar 13, 2012 at 13:53

Andres I Perez

75.5k21 gold badges159 silver badges139 bronze badges

6 Comments

codeape Over a year ago

Thanks, that's just what I needed. I did some googling and found out about the pointer-events css attribute. This updated version of your jsfiddle uses pointer-events instead of using script to disable the action: jsfiddle.net/fABRr/2

Andres I Perez Over a year ago

Sadly that is only supported by FF4+ and Chrome (last time i checked) :( , thought about using the same as well but did not think it was a proper answer with such lack of support.

Andres I Perez Over a year ago

Support Chart, no IE support (no surprise there), FF is supported ver 3.6+, no Opera support, Chrome ver 16+ support. Not bad, but not so good either :(

codeape Over a year ago

Ouch. I guess I'll check for the disabled-link class in the click handlers for the menu items then.

ılǝ Over a year ago

When combining bootstrap with some frameworks (eg. knockout), preventing the click event may not work. This is for example the case using knockout's data-bind="click: ..." . Using .unbind("click"); instead will do the trick.

|

Alex Craft · Accepted Answer · 2012-05-30 22:47:31Z

7

I prefer this (LESS):

/* Disable link */
a.disabled, 
a.disabled:visited ,
a.disabled:active,
a.disabled:hover {  
  color: #999 ;
  cursor: default;
}
.dropdown-menu {
  a.disabled, 
  a.disabled:visited ,
  a.disabled:active,
  a.disabled:hover {  
    color: #999 ;
    cursor: default;
    background-color: white;
  }
}

answered May 30, 2012 at 22:47

Alex Craft

15.8k14 gold badges92 silver badges168 bronze badges

Comments

falsetru · Accepted Answer · 2013-10-08 18:45:48Z

6

To disable the the dropdown use:

$('.dropdown-toggle').addClass('disabled');

To enable it back:

$('.dropdown-toggle').removeClass('disabled');

edited Oct 8, 2013 at 18:45

falsetru

371k69 gold badges770 silver badges660 bronze badges

answered Oct 8, 2013 at 18:25

David Wartell

7361 gold badge8 silver badges13 bronze badges

2 Comments

But I'm Not A Wrapper Class Over a year ago

For some reason, it doesn't add/remove after the initial page load.

Winand Over a year ago

it looks disabled but is still clickable. I've added .dropdown-item.disabled {pointer-events: none;} as mentioned in comments here

osensoy · Accepted Answer · 2015-07-31 12:29:35Z

6

YES, Bootstrap has a predefined class with all necessary styling you need. You can simply add disabled class to whichever <li> you want

answered Jul 31, 2015 at 12:29

osensoy

611 silver badge2 bronze badges

2 Comments

lzap Over a year ago

This does not actually work, at least with Bootstrap 3.x.

lzap Over a year ago

Oh waid, you said for <li> - that works. Make sure you don't add it for <a>.

Buzzy · Accepted Answer · 2012-07-31 08:22:30Z

3

Just to add to Andres answer (don't have enough reputation to add comments :( ). You need to return false from the event handler or it might continue executing other handlers.

$(".disabled-link").click(function(event) {
  event.preventDefault();
  return false;
});

answered Jul 31, 2012 at 8:22

Buzzy

3,0054 gold badges24 silver badges34 bronze badges

5 Comments

codeape Over a year ago

I believe event.preventDefault() takes care of that.

Nathan Over a year ago

@codeape I believe that return false is needed for IE though.

yagooar Over a year ago

@codeape In Chrome, return false is mandatory as well, so I would say it can be considered a good practice.

T.J. Crowder Over a year ago

In a jQuery event handler, return false does two things: event.stopPropagation() and event.preventDefault(). (When not using jQuery, return false in event handlers means other things depending on where you use it...) So if you add return false, you can remove event.preventDefault(), because that will be done anyway.

iberck Over a year ago

If you add return false; do not disappear the dropdown if it triggers a confirmation dialog.

Cousin Richie · Accepted Answer · 2014-04-21 14:25:44Z

1

Similar to above you can use:

    li.disabled > a {
    color:#aaa !important;
    }

This way you are keeping the same bootstrap default class for disabled links and implement the preventDefault() Javascript to disabled the link.

$(".disabled").click(function(event) {
event.preventDefault();
return false;
});

answered Apr 21, 2014 at 14:25

Cousin Richie

414 bronze badges

Comments

RobC · Accepted Answer · 2019-10-13 12:16:35Z

0

<div class="dropdown-menu">
  <a class="dropdown-item" href="#">Regular link</a>
  **<a class="dropdown-item disabled" href="#">Disabled link</a>**
  <a class="dropdown-item" href="#">Another link</a>
</div>

Add .disabled to items in the dropdown to style them as disabled. Source: www.getbootstrap.com

edited Oct 13, 2019 at 12:16

RobC

25.3k21 gold badges87 silver badges88 bronze badges

answered Oct 13, 2019 at 11:25

Saket Uchil

151 silver badge7 bronze badges

Collectives™ on Stack Overflow

Disabled dropdown menu items using twitter bootstrap

8 Answers 8

5 Comments

6 Comments

Comments

2 Comments

2 Comments

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

6 Comments

Comments

2 Comments

2 Comments

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related