Material Admin Extended Dark

## Dropdown

Toggleable, contextual menu for displaying lists of links.

This is a Bootstrap's Javascript component. You can check the official documentation at: http://getbootstrap.com/javascript/#dropdowns

Live preview: `/components.html`

#### Basic example

    <!-- Default -->
    <div class="dropdown">
        <button type="button" class="btn btn-default" data-toggle="dropdown">Click Me</button>

        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <!-- Icon -->
    <div class="dropdown">
        <button type="button" class="btn btn-default" data-toggle="dropdown">Click Me</button>

        <ul class="dropdown-menu dropdown-menu--icon">
            <li><a href="#"><i class="zmdi zmdi-home"></i> Action</a></li>
            <li><a href="#"><i class="zmdi zmdi-account"></i> Another action</a></li>
            <li><a href="#"><i class="zmdi zmdi-email"></i> Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#"><i class="zmdi zmdi-pin"></i> Separated link</a></li>
        </ul>
    </div>

#### Dropdown Alignments

    <!-- Left aligned(default) -->
    <div class="dropdown">
        <button type="button" class="btn btn-default" data-toggle="dropdown">Click Me</button>

        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

    <!-- Right aligned-->
    <div class="dropdown">
        <button type="button" class="btn btn-default" data-toggle="dropdown">Click Me</button>

        <ul class="dropdown-menu pull-right">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

#### Dropups

Trigger dropdown menus above elements.

    <div class="dropdown dropup">
        <a href="#" class="btn btn-default" data-toggle="dropdown">This is a Dropup</a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>

#### Split Button Dropdowns

    <div class="btn-group">
        <button type="button" class="btn btn-default">Default</button>
        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
            <span class="sr-only">Split button dropdowns</span>
        </button>
        <ul class="dropdown-menu" role="menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li class="divider"></li>
            <li><a href="#">Separated link</a></li>
        </ul>
    </div>