Material Style

Components Menu

Dropdowns

Center Dropdowns

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-default dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Button <i class="zmdi zmdi-chevron-down right"></i>
    </button>
    <ul class="dropdown-menu">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

<!-- Single button -->
<div class="btn-group">
    <button type="button" class="btn btn btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Button <i class="zmdi zmdi-chevron-down right"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-primary">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)"><i class="zmdi zmdi-home"></i>Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)"><i class="zmdi zmdi-info"></i>Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)"><i class="zmdi zmdi-star"></i>Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)"><i class="zmdi zmdi-edit"></i>Separated link</a></li>
    </ul>
</div>

Right Dropdowns

<div class="btn-group">
    <button type="button" class="btn btn-default btn-raised">Button</button>
    <button type="button" class="btn btn-default btn-raised dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-right">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
</div>

Left Dropdowns

<div class="btn-group">
    <button type="button" class="btn btn-primary btn-raised dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        <i class="zmdi zmdi-chevron-down right only"></i>
    </button>
    <ul class="dropdown-menu dropdown-menu-left dropdown-menu-primary">
        <li class="dropdown-header">Button</li>
        <li><a class="dropdown-item" href="javascript:void(0)">Action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Another action</a></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Something else here</a></li>
        <li role="separator" class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="javascript:void(0)">Separated link</a></li>
    </ul>
    <button type="button" class="btn btn-primary btn-raised">Button</button>
</div>

MaterialStyle

Social Links

12
 4