Bootstrap Dropdowns

Bootstrap Dropdowns allow you to create toggleable menus for navigation, actions, or filters. They are interactive and easy to use with built-in classes and minimal JavaScript.

Available in Bootstrap 3, 4, and 5. Slight syntax differences exist in newer versions.

✅ Basic Dropdown

<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
Dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li><a href="#">Action 3</a></li>
</ul>
</div>

Dropdown <span class="caret"></span>

</button>

<li><a href="#">Action 1</a></li>

<li><a href="#">Action 2</a></li>

<li><a href="#">Action 3</a></li>

</ul>

</div>

🔹 Dropdown Inside Navbar

<nav class="navbar navbar-default">
<div class="container-fluid">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Menu <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</li>
</ul>
</div>
</nav>

Menu <span class="caret"></span>

</a>

</ul>

</li>

</ul>

</div>

</nav>

🔽 Dropdown with Headers & Dividers

<div class="dropdown">
<button class="btn btn-info dropdown-toggle" type="button" data-toggle="dropdown">
Actions <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li class="dropdown-header">Header 1</li>
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
<li class="divider"></li>
<li class="dropdown-header">Header 2</li>
<li><a href="#">Action 3</a></li>
</ul>
</div>

Actions <span class="caret"></span>

</button>

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

<li><a href="#">Action 1</a></li>

<li><a href="#">Action 2</a></li>

<li class="dropdown-header">Header 2</li>

<li><a href="#">Action 3</a></li>

</ul>

</div>

.dropdown-header → Adds a non-clickable header inside the menu.
.divider → Adds a horizontal divider between items.

🎯 Dropdown Alignment

Right-aligned dropdown:

<div class="dropdown">
<button class="btn btn-success dropdown-toggle" type="button" data-toggle="dropdown">
Right Menu <span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>

Right Menu <span class="caret"></span>

</button>

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

</ul>

</div>

🔹 Dropup (Menu opens upwards)

<div class="dropup">
<button class="btn btn-warning dropdown-toggle" type="button" data-toggle="dropdown">
Dropup <span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Option 1</a></li>
<li><a href="#">Option 2</a></li>
</ul>
</div>

Dropup <span class="caret"></span>

</button>

<li><a href="#">Option 1</a></li>

<li><a href="#">Option 2</a></li>

</ul>

</div>

⚡ Split Button Dropdown

<div class="btn-group">
<button class="btn btn-primary">Action</button>
<button class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Action 1</a></li>
<li><a href="#">Action 2</a></li>
</ul>
</div>

<button class="btn btn-primary">Action</button>

</button>

<li><a href="#">Action 1</a></li>

<li><a href="#">Action 2</a></li>

</ul>

</div>

✔ Summary

Feature	Supported
Basic dropdown menu	✔️
Dropdown in navbar	✔️
Headers & dividers	✔️
Right-aligned & dropup menus	✔️
Split button dropdown	✔️
Works with buttons, links	✔️

Bootstrap Dropdowns

✅ Basic Dropdown

🔹 Dropdown Inside Navbar

🔽 Dropdown with Headers & Dividers

🎯 Dropdown Alignment

Right-aligned dropdown:

🔹 Dropup (Menu opens upwards)

⚡ Split Button Dropdown

✔ Summary

You may also like...

Bootstrap 3 Tutorial

Bootstrap Grids

Bootstrap Dropdowns

✅ Basic Dropdown

🔹 Dropdown Inside Navbar

🔽 Dropdown with Headers & Dividers

🎯 Dropdown Alignment

Right-aligned dropdown:

🔹 Dropup (Menu opens upwards)

⚡ Split Button Dropdown

✔ Summary

You may also like...

Bootstrap Button Groups

Bootstrap Form Inputs

Bootstrap Tabs and Pills

Bootstrap 3 Tutorial

Bootstrap Grids