Dropdown Menus

Dropdown menus allow users to take an action by selecting from a list of choices revealed upon opening a temporary, new sheet of material.

Material uses Bootstrap's dropdown, please visit Bootstrap's documentation site for detailed usage.

Bootstrap Dropdown open_in_new

Examples

Toggle dropdown menus by clicking the links below.

In addition, clicking on the user avatar in the top right hand corner of the page can also trigger a dropdown menu.

more_vert

more_vert

<li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown"> ... </a>
    <ul class="dropdown-menu">
        <li>
            <a> ... </a>
        </li>
    </ul>
</li>

<div class="dropdown-wrap">
    <div class="dropdown dropdown-inline">
        <a class="btn dropdown-toggle-btn" data-toggle="dropdown"> ... </a>
        <ul class="dropdown-menu nav">
            <li>
                <a> ... </a>
            </li>
        </ul>
    </div>
</div>