Tutorial on Bootstrap 3 Drop downs

Bootstrap 3 dropdowns are mainly used in the navigation menu to make a dropdown menu, But sometimes it is used in button and div also for scripting. A bootstrap 3 dropdowns is a toggleable menu that allows you to choose a value from a togglable list.

Basic Dropdown

To make a basic dropdown add the class name .dropdown to a parent div and inside that create a button or anchor tag and add the class name .dropdown-toggle and data-toggle="dropdown" to it and then create a list with the class name .dropdown-menu and you have done a basic bootstrap 3 dropdown.

Example

Try it yourself

<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="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Dropdown Divider

To make dropdown divider use .divider class name to a li inside the ul with the class name .dropdown-menu it is used to separate element inside the dropdown menu with a horizontal border

Example

 

Try it yourself

<li class="divider"></li>

Dropdown Header

Like dropdown divider use class name .dropdown-header to add headers inside the dropdown menu.

Example

 

Try it yourself

<li class="dropdown-header">Dropdown header 1</li>

Disable and Active items

to make an item disable that is on hover a cross button will appear to use the class name .disabled and to make a Highlight item use class name .active to make a blue background item.

Example

 

Try it yourself

<li class="disabled"><a href="#">CSS</a></li>
<li class="active"><a href="#">HTML</a></li>

Dropdown Position

You can make a dropdown position right by using the class name .dropdown-menu-right on the ul with the class name .dropdown-menu and it will open on the right side of the page.

Example

 

Try it yourself

<ul class="dropdown-menu dropdown-menu-right">

Bootstrap 3 Dropup

If you want to make a collapsable menu will open on the above direction then use .dropup instead of .dropdown and the other will be same and it will be done

Example

 

Try it yourself

<div class="dropup">
	<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Dropup Example
	<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">HTML</a></li>
		<li><a href="#">CSS</a></li>
		<li><a href="#">JavaScript</a></li>
		<li class="divider"></li>
		<li><a href="#">About Us</a></li>
	</ul>
</div>

Dropdown role and area

To improve accessibility using screen readers, you can include the role and aria-* in a dropdown menu.

Example

 

Try it yourself

<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="#">HTML</a></li>
    <li role="presentation"><a role="menuitem" href="#">CSS</a></li>
    <li role="presentation"><a role="menuitem" href="#">JavaScript</a></li>
    <li role="presentation" class="divider"></li>
    <li role="presentation"><a role="menuitem" href="#">About Us</a></li>
  </ul>
</div>

In this post we have learned how to make Bootstrap 3 Dropdowns and Dropup, I hope the post helped you, please leave a comment to make the site more useful and better.

Thanks for reading