A dropdown is a toggleable menu that opens on click, not hover. Wrap a .dropdown-toggle button (which draws the caret) and a .dropdown-menu in .dropdown, or in .dropup, .dropend or .dropstart for other directions, and fill the menu with .dropdown-item, .dropdown-header and <hr class="dropdown-divider">. A split button adds .dropdown-toggle-split inside a .btn-group.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel=stylesheet>
<div class="p-3 d-flex justify-content-end">
<div class="btn-group">
<button type="button" class="btn btn-success">Save</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false" aria-label="More options"></button>
<ul class="dropdown-menu dropdown-menu-end">
<li><h6 class="dropdown-header">Export</h6></li>
<li><a class="dropdown-item active" href="#">Save as PDF</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item disabled" aria-disabled="true">Publish</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
<script>bootstrap.Dropdown.getOrCreateInstance('.dropdown-toggle').show();</script>
Arrow keys move between items and Esc closes the menu, but Bootstrap 2,007 adds no ARIA menu roles. The autoClose option (true, 'inside', 'outside' or false) can keep a menu open while the user fills in a form inside it.