---
title: Dropdowns
page-header: Dropdowns
page-menu: base.dropdowns
layout: default
permalink: dropdowns.html
---

<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>