WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Dropdowns


Basic Dropdown

Bootstrap drop-down menu depends on popper.min.js.

The drop-down menu is switchable, and it displays the linked context menu in a list format.

Example

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">c++</a></li>
    <li><a href="#">Python</a></li>
    <li><a href="#">Java</a></li>
  </ul>
</div>
Try it Yourself »

Example Explained

. dropdown class is used to specify a drop-down menu.

We can use a button or link to open the drop-down menu. The button or link needs to add data-toggle = "dropdown" attribute.

<div> Add the . Dropdown-menu class to the element to set the actual drop-down menu, and then add the drop-down menu options . dropdown-item class.

We can also <a> Used in tags:


Dropdown Divider

This .divider class is used to create a horizontal dividing line in the drop-down menu: menu

Example

<li class="divider"></li>
Try it Yourself »

Dropdown Header

This code .dropdown-header Class to add a title to a drop-down menu:

Example

<li class="dropdown-header">Dropdown header 1</li>
Try it Yourself »

Disable an Item

We can disable an item in the dropdown menu, by using the .disabled class:

Example

<li class="disabled"><a href="#">CSS</a></li>
Try it Yourself »

Dropdown Position

WIf we want to align the drop-down menu to the right, we can add the .dropdown-menu-right class after the .dropdown-menu class on the element.

Example

<ul class="dropdown-menu dropdown-menu-right">
Try it Yourself »

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to "dropup":

Example

<div class="dropup">
Try it Yourself »

Dropdown Accessibility

To help improve accessibility for people using screen readers, you should include the following role and aria-* attributes, when creating a dropdown menu:

Example

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
  <span class="caret"></span></button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
    <li role="presentation"><a role="menuitem" href="#">c++</a></li>
    <li role="presentation"><a role="menuitem" href="#">Python</a></li>
    <li role="presentation"><a role="menuitem" href="#">Java</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>
Try it Yourself »