---
title: Dropdowns
page-header: Dropdowns
menu: base.dropdowns
---

<div class="row">
	<div class="col-sm-6 col-lg-3">
		{% include ui/dropdown-menu-all.html show=true %}
	</div>
	<div class="col-sm-6 col-lg-3">
		{% include ui/dropdown-menu.html show=true %}
		{% include ui/dropdown-menu.html show=true separated=true %}
		{% include ui/dropdown-menu.html show=true active=true %}
		{% include ui/dropdown-menu.html show=true disabled=true %}
		{% include ui/dropdown-menu.html show=true header=true %}
		{% include ui/dropdown-menu.html show=true icons=true header=true %}
		{% include ui/dropdown-menu.html show=true arrow=true %}
	</div>
	<div class="col-sm-6 col-lg-3">
		{% include ui/dropdown-menu.html show=true %}
		{% include ui/dropdown-menu.html show=true separated=true %}
		{% include ui/dropdown-menu.html show=true active=true %}
		{% include ui/dropdown-menu.html show=true disabled=true %}
		{% include ui/dropdown-menu.html show=true header=true %}
		{% include ui/dropdown-menu.html show=true icons=true %}
		{% include ui/dropdown-menu.html show=true badge=true %}
	</div>
	<div class="col-sm-6 col-lg-3">
		{% include ui/dropdown-menu.html show=true dark=true %}
		{% include ui/dropdown-menu.html show=true dark=true separated=true %}
		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true %}
		{% include ui/dropdown-menu.html show=true arrow=true right=true dark=true icons=true %}
		{% include ui/dropdown-menu.html show=true check=true %}
		{% include ui/dropdown-menu.html show=true radio=true %}
		{% include ui/dropdown-menu.html show=true people=true %}
	</div>
</div>