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>