Menu
Menus display a list of choices on temporary surfaces. They appear when users interact with a button or other control.
Contextual Actions!
Simple Menu
Overflow items
Build menus using Bootstrap 5's .dropdown. Ensure high elevation for clarity.
Floating Surfaces!
HTML
<!-- Simple Material Menu -->
<div class="dropdown">
<button class="btn btn-icon rounded-circle" type="button" data-bs-toggle="dropdown">
<i class="material-icons">more_vert</i>
</button>
<ul class="dropdown-menu shadow-lg border-0 py-2" style="border-radius: 12px;">
<li><a class="dropdown-item d-flex align-items-center gap-3 py-2" href="#"><i class="material-icons text-muted">edit</i> Edit</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item d-flex align-items-center gap-3 py-2 text-primary" href="#"><i class="material-icons">share</i> Share</a></li>
</ul>
</div>