Menu
×
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

Bootstrap JS Dropdown


JS Dropdown (dropdown.js)

A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

For a tutorial about Dropdowns, read our Bootstrap Dropdowns Tutorial.


The Dropdown Plugin Classes

Class Description Example
.dropdown Indicates a dropdown menu Try it
.dropdown-menu Builds the dropdown menu Try it
.dropdown-menu-right Right-aligns a dropdown menu Try it
.dropdown-header Adds a header inside the dropdown menu Try it
.dropup Indicates a dropup menu Try it
.disabled Disables an item in the dropdown menu Try it
.divider Separates items inside the dropdown menu with a horizontal line Try it

Via data-* Attributes

Add data-toggle="dropdown" to a link or a button to toggle a dropdown menu.

Example

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Example</a>
Try it Yourself »

Via JavaScript

Enable manually with:

Example

$('.dropdown-toggle').dropdown();
Try it Yourself »

Note: The data-toggle="dropdown" attribute is required regardless of whether you call the dropdown() method.



Dropdown Options

None

Dropdown Methods

The following table lists all available dropdown methods.

Method Description Try it
.dropdown("toggle") Toggles the dropdown Try it

Dropdown Events

The following table lists all available dropdown events.

Event Description Try it
show.bs.dropdown Occurs when the dropdown is about to be shown. Try it
shown.bs.dropdown Occurs when the dropdown is fully shown (after CSS transitions have completed) Try it
hide.bs.dropdown Occurs when the dropdown is about to be hidden Try it
hidden.bs.dropdown Occurs when the dropdown is fully hidden (after CSS transitions have completed) Try it

Tip: Use jQuery's event.relatedTarget to get the element which triggered the dropdown:

Example

$(".dropdown").on("show.bs.dropdown", function(event){
  var x = $(event.relatedTarget).text(); // Get the text of the element
  alert(x);
});
Try it Yourself »

More Examples

Change the caret icon to upside down

The following example changes the caret icon from pointing downwards to upwards when clicking on the dropdown:

Example

/* CSS: */
<style>
.caret.caret-up {
  border-top-width: 0;
  border-bottom: 4px solid #fff;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $(".dropdown").on("hide.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret"></span>');
  });
  $(".dropdown").on("show.bs.dropdown", function(){
    $(".btn").html('Dropdown <span class="caret caret-up"></span>');
  });
});
</script>
Try it Yourself »

Navbar With Dropdown

The following example adds a dropdown menu for a button in the navigation bar:

Example

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li class="dropdown">
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1
          <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Page 1-1</a></li>
            <li><a href="#">Page 1-2</a></li>
            <li><a href="#">Page 1-3</a></li>
          </ul>
        </li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
    </div>
  </div>
</nav>
Try it Yourself »

The following example adds a dropdown menu with a login form in the navbar:

Example

<ul class="nav navbar-nav navbar-right">
  <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Login <span class="glyphicon glyphicon-log-in"></span></a>
    <div class="dropdown-menu">
      <form id="formlogin" class="form container-fluid">
        <div class="form-group">
          <label for="usr">Name:</label>
          <input type="text" class="form-control" id="usr">
        </div>
        <div class="form-group">
          <label for="pwd">Password:</label>
          <input type="password" class="form-control" id="pwd">
        </div>
          <button type="button" id="btnLogin" class="btn btn-block">Login</button>
      </form>
      <div class="container-fluid">
        <a class="small" href="#">Forgot password?</a>
      </div>
    </div>
  </li>
</ul>
Try it Yourself »

Multi-Level Dropdowns

In this example, we use jQuery to open multi-level dropdowns on click:

Example

<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
Try it Yourself »

In this example, we have created a custom .dropdown-submenu class for multi-level dropdowns:

Example

 /* CSS: */
<style>
.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
</style>

/* JS: */
<script>
$(document).ready(function(){
  $('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
});
</script>
Try it Yourself »

×

Contact Sales

If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail:
[email protected]

Report Error

If you want to report an error, or if you want to make a suggestion, send us an e-mail:
[email protected]

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Copyright 1999-2024 by Refsnes Data. All Rights Reserved. W3Schools is Powered by W3.CSS.