Vitreo
Components

Dropdowns

Menus that open from a button

Basic

Code 
<div class="dropdown">
  <button type="button" class="btn btn-gray" data-menu="dd-1" aria-haspopup="menu" aria-expanded="false" aria-controls="dd-1">Options<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="menu glass" id="dd-1" role="menu" hidden data-align="start"><button class="menu-item" type="button" role="menuitem" tabindex="-1" data-dialog-open="new-edit"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Edit</button><button class="menu-item" type="button" role="menuitem" tabindex="-1" 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><div class="menu-sep" role="separator"></div><button class="menu-item danger" type="button" role="menuitem" tabindex="-1" 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-menu="dd-2" aria-haspopup="menu" aria-expanded="false" aria-controls="dd-2">File<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="menu glass" id="dd-2" role="menu" hidden data-align="start"><div class="menu-label">Document</div><button class="menu-item" type="button" role="menuitem" tabindex="-1" data-dialog-open="new-new-item"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>New<span class="shortcut">⌘N</span></button><button class="menu-item" type="button" role="menuitem" tabindex="-1" data-attach><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Open<span class="shortcut">⌘O</span></button><button class="menu-item" type="button" role="menuitem" tabindex="-1" 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-menu="dd-3" aria-haspopup="menu" aria-expanded="false" aria-controls="dd-3"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button><div class="menu glass" id="dd-3" role="menu" hidden data-align="end"><a class="menu-item" href="settings.html" role="menuitem" tabindex="-1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Settings</a><a class="menu-item" href="help-center.html" role="menuitem" tabindex="-1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>Help</a></div>
</div>
© Vitreo. All rights reserved.