Dropdowns
Menus that open from a button
Basic
Code
<div class="dropdown">
<button type="button" class="btn btn-gray" data-bs-toggle="dropdown" aria-expanded="false">Options<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="dropdown-menu glass"><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#new-edit"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Edit</button><button class="dropdown-item" type="button" data-toast='{"title":"Duplicated","text":"The copy is at the top of the list.","tone":"success"}'><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Duplicate</button><hr class="dropdown-divider"><button class="dropdown-item danger" type="button" data-toast='{"title":"Deleted","text":"You can undo this from the history.","tone":"info"}'><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Delete</button></div>
</div>With labels and shortcuts
Code
<div class="dropdown">
<button type="button" class="btn btn-gray" data-bs-toggle="dropdown" aria-expanded="false">File<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="dropdown-menu glass"><div class="dropdown-header">Document</div><button class="dropdown-item" type="button" data-bs-toggle="modal" data-bs-target="#new-new-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>New<span class="shortcut">⌘N</span></button><button class="dropdown-item" type="button" data-attach><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open<span class="shortcut">⌘O</span></button><button class="dropdown-item" type="button" data-toast='{"title":"Saved","text":"Your changes are saved.","tone":"success"}'><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Save<span class="shortcut">⌘S</span></button></div>
</div>Aligned to the end
For buttons on the right.
Code
<div class="dropdown">
<button type="button" class="btn btn-ghost btn-icon" aria-label="More options" data-bs-toggle="dropdown" aria-expanded="false"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="dropdown-menu glass dropdown-menu-end"><a class="dropdown-item" href="settings.html"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Settings</a><a class="dropdown-item" href="help-center.html"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Help</a></div>
</div>