Tutorial on Bootstrap 3 Drop downs

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

Basic Dropdown

To make a basic dropdown add class name .dropdown to a parrent div and inside that create a button or anchar tag and add classname .dropdown-toggle and data-toggle="dropdown" to it and then create a list with 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 classname .dropdown-menu it is 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 classname .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 a item disable that is on hover a cross button will appear use class name .disabled and to make a Highlight item use classname .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 posion right by using classname .dropdown-menu-right on the ul with classname .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 abouv direction then use .dropup insted 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 larned how to make Bootstrap 3 Dropdowns and Dropup, I hope the post helped you , please leave comment to make the site more usefull and better.

Thanks for reading