WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Dropdowns


In this chpater we discuss of Dropdown

Basic Dropdown

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

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

This code have .dropdown class indicates a dropdown menu.

We can open the dropdown menu, use a button or a link with a class of .dropdown-toggle and the data-toggle="dropdown" attribute.

The .caret class creates a caret arrow icon (), which indicates that the button is a dropdown.

We can use by adding this code .dropdown-menu class to a <ul> element to actually build the dropdown menu.


Dropdown Divider

This .divider class is mainly used to separate links inside the dropdown menu

Example

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

Dropdown Header

This code .dropdown-header class is used to add headers inside the dropdown 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

We can use right-align the dropdown, by adding the .dropdown-menu-right class to the element with .dropdown-menu:

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 »