Dropdowns

Name: Rence Material
Author: david abalaku

Toggle contextual overlays for displaying lists of links. Rence Material transforms standard menus into Material 3 surfaces.

Contextual Lists!

Single button

Click to reveal

Dropdown menus feature high elevation shadows and rounded corners by default.

Material Elevation!

HTML

<!-- Single button dropdown -->
<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu shadow-lg border-0 rounded-4">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>