Basic Example
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position relative. Dropdowns can be triggered from link or button elements to better fit your potential needs.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-primary"
data-toggle="dropdown" id="dropdownMenuButton" type="button">Dropdown Menu <i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
Dropup
Trigger dropdown menus above elements by adding dropup class to the parent element.
<div class="dropdown dropup">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-secondary"
data-toggle="dropdown" type="button">Dropup Menu <i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Dropright & Dropleft
Trigger dropdown menus above elements by adding dropright & dropleft class to the parent element.
<div class="row row-xs">
<div class="col-sm-6 col-md-3">
<div class="dropdown dropright">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-info"
data-toggle="dropdown" id="droprightMenuButton" type="button">Dropright Menu<i class="fas fa-caret-right ml-1"></i></button>
<div aria-labelledby="droprightMenuButton" class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
<div class="col-sm-6 col-md-3 mg-t-10 mg-sm-t-0">
<div class="dropdown dropleft">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-danger dropdown-toggle"
data-toggle="dropdown" id="dropleftMenuButton" type="button">Dropright Menu</button>
<div aria-labelledby="dropleftMenuButton" class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</div>
</div>Active Menu Item
Add active class to items in the dropdown to style them as active.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-warning"
data-toggle="dropdown" type="button">Dropdown Menu<i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item active" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Disabled Menu Item
Add disabled class to items in the dropdown to style them as disabled.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-primary"
data-toggle="dropdown" type="button">Dropdown Menu<i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item disabled" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Dropdown Header
Add a header to label sections of actions in any dropdown menu.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-secondary"
data-toggle="dropdown" type="button">Dropdown Menu<i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>Dropdown Divider
Separate groups of related menu items with a divider.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn ripple btn-info"
data-toggle="dropdown" type="button">Dropdown Menu<i class="fas fa-caret-down ml-1"></i></button>
<div class="dropdown-menu tx-13">
<h6 class="dropdown-header tx-uppercase tx-11 tx-bold tx-inverse tx-spacing-1">Dropdown header</h6>
<a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div><a class="dropdown-item" href="#">Separated link</a>
</div>
</div>