Atlas
.atlas-popover

Popover

Floating menu with shadow. Use for dropdowns, context menus, and action lists.

.atlas-popover.atlas-menu-item.atlas-menu-separator

Default

<div class="atlas-popover" style="width:200px;position:relative">
  <button class="atlas-menu-item">Rename</button>
  <button class="atlas-menu-item">Duplicate</button>
  <button class="atlas-menu-item">Move to…</button>
  <div class="atlas-menu-separator"></div>
  <button class="atlas-menu-item" style="color:var(--status-error)">Delete</button>
</div>

With shortcuts

<div class="atlas-popover" style="width:240px;position:relative">
  <button class="atlas-menu-item" style="display:flex;justify-content:space-between;align-items:center"><span>New file</span><kbd class="atlas-kbd">⌘N</kbd></button>
  <button class="atlas-menu-item" style="display:flex;justify-content:space-between;align-items:center"><span>Open</span><kbd class="atlas-kbd">⌘O</kbd></button>
  <button class="atlas-menu-item" style="display:flex;justify-content:space-between;align-items:center"><span>Save</span><kbd class="atlas-kbd">⌘S</kbd></button>
</div>