A menu displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control.
Bootstrap documentation: Dropdowns
Most of the details have been covered here
Material Design guidelines: Menus
Material Components for the web: Menu
Behaviour
Add .menu to default .dropdown-menu to have the menu appear above its toggler.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton1" type="button">Menu</button>
<div aria-labelledby="dropdownMenuButton1" class="dropdown-menu menu">
<a class="dropdown-item" href="#">Undo</a>
<a class="dropdown-item" href="#">Redo</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Cut</a>
<a class="dropdown-item" href="#">Copy</a>
<a class="dropdown-item" href="#">Paste</a>
</div>
</div>Type
Add an additional class .dropdown-menu-sm to an existing .dropdown-menu to achieve a more compact dropdown menu which is more suitable for desktop.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton2" type="button">Menu</button>
<div aria-labelledby="dropdownMenuButton2" class="dropdown-menu dropdown-menu-sm">
<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>Add an additional class .menu-cascading to an existing .dropdown-menu to have a more compact dropdown menu appear above its toggler.
<div class="dropdown">
<button aria-expanded="false" aria-haspopup="true" class="btn dropdown-toggle" data-toggle="dropdown" id="dropdownMenuButton3" type="button">Menu</button>
<div aria-labelledby="dropdownMenuButton3" class="dropdown-menu menu-cascading">
<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>