A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list.

Basic Dropdown

Examples:

HTML Code:

<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Simple<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>

<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Header<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li class="dropdown-header">Dropdown header 1</li>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li class="dropdown-header">Dropdown header 2</li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
		<li><a href="#">Item 6</a></li>
	</ul>
</div>

<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Icons<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#"><i class="material-icons">person</i>Your Profile</a></li>
		<li><a href="#"><i class="material-icons">settings</i>Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">lock</i> Lock</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">exit_to_app</i> Log Out</a></li>
	</ul>
</div>

Dropdown Position

Right Direction

To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu:

Examples:

HTML Code:

<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Simple<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>
<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Header<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li class="dropdown-header">Dropdown header 1</li>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li class="dropdown-header">Dropdown header 2</li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
		<li><a href="#">Item 6</a></li>
	</ul>
</div>
<div class="dropdown">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Icons<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li><a href="#"><i class="material-icons">person</i>Your Profile</a></li>
		<li><a href="#"><i class="material-icons">settings</i>Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">lock</i> Lock</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">exit_to_app</i> Log Out</a></li>
	</ul>
</div>

Up Direction

If you want the dropdown menu to expand upwards instead of downwards, change the <div> element with class="dropdown" to class="dropup"

Examples:

HTML Code:

<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Simple<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>
<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Header<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li class="dropdown-header">Dropdown header 1</li>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li class="dropdown-header">Dropdown header 2</li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
		<li><a href="#">Item 6</a></li>
	</ul>
</div>
<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Icons<span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#"><i class="material-icons">person</i>Your Profile</a></li>
		<li><a href="#"><i class="material-icons">settings</i>Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">lock</i> Lock</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">exit_to_app</i> Log Out</a></li>
	</ul>
</div>

Up Direction Right Direction

To right-align the dropdown, add the .dropdown-menu-right class to the element with .dropdown-menu

Examples:

HTML Code:

<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Simple<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
	</ul>
</div>
<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Header<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li class="dropdown-header">Dropdown header 1</li>
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>
		<li class="dropdown-header">Dropdown header 2</li>
		<li><a href="#">Item 4</a></li>
		<li><a href="#">Item 5</a></li>
		<li><a href="#">Item 6</a></li>
	</ul>
</div>
<div class="dropup">
	<button class="btn btn-default-bright btn-raised dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Icons<span class="caret"></span></button>
	<ul class="dropdown-menu dropdown-menu-right">
		<li><a href="#"><i class="material-icons">person</i>Your Profile</a></li>
		<li><a href="#"><i class="material-icons">settings</i>Settings</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">lock</i> Lock</a></li>
		<li class="divider"></li>
		<li><a href="#"><i class="material-icons">exit_to_app</i> Log Out</a></li>
	</ul>
</div>